ECサイトを制作するとき、レイアウトやデザインに迷うことがありませんか？売れるECサイトのデザイン方法を取り入れて、他社にデザインで差をつけましょう。購入者の目線でECサイトをデザインするコツや、人気サイトが実践しているポイントもわかりやすくご紹介します。 「売れるデザイン」の本質 世の中には、デザインは普通に見えるのによく売れるECサイトがある一方で、デザインがとても綺麗なのに全く売れないECサイトが存在します。つまり、ECサイトの見た目の印象と売上は、必ずしも比例しません。その理由は、どこにあるのでしょうか？ 結論から言うと、売れるECサイトが実践している「売れるデザイン」には、サイトの美しさやかっこよさといった「印象をつくるデザイン」だけではなく、「良い購入体験をつくるデザイン」が含まれています。後者のデザインは、サイトを訪れたユーザの行動（見る・クリック・購入など）を促すことができ

本セミナーでは、デザインやITの知識を持たない方でも直感的で使いやすいUIの検討（アプリケーションの画面設計等）を行える方法論をご紹介します。 DXに取り組む企業の増加、ノーコード開発ツールの発展などの背景から、最近、デザインやITの知識をほとんど持たない方が業務用アプリ等の画面をつくる機会が増え…

現在、本業・副業ともにWEBデザイナーとしてデザイン・コーディングをしているゆるけーです。 本業で携わっているWEBサービスが割と高齢者向けのサービスで、ITリテラシーやUIが今の自分と考え方が異なるよなーと思っているなか、『高齢者のためのユーザインタフェースデザイン』という書籍に出会いました。 高齢者関係なく普通にアクセシビリティの観点でも重要な視点がたくさんあり、とてもいい書籍だったので、ざっくり大事だと思った箇所を抜粋しつつ自分で探した事例等をざっと記事にまとめていきますー。 視覚 高齢者になると視力が低下する傾向があります。ただ、視力の低下＝フォントを大きくするだけではありません。 視力の低下は老眼や光覚の減少などより複雑です。 主な視力の低下の具体例は以下のような点。 老眼：近く・遠くのものの焦点が合わない 周辺視野のぼやけ：画面の端に気づきにくい 中心視野の損失：画面の中央が暗

まとめ 住所フォームの作り方 住所フォームを作るときには以下の4つを押さえましょう。 オートコンプリート機能に最適化する 郵便番号フィールドは1フィールドにしてハイフン有無どちらも対応する モバイルUX優先なら郵便番号が入力されたら即座に補完。精度優先なら郵便番号補完ボタンを設置 住所フィールドは「都道府県」「市区町村」「町名以下」の3フィールドが基本。「建物」フィールドはオプション 本文 地域SNSのユーザー登録、ECサイトの配送先入力、資料請求、自治体サイトでの電子申請など、ウェブサービスを活用する上で住所入力は欠かすことができません。 住所入力をシンプルかつ正確に行えるような入力インタフェース（住所フォーム）は、離脱率を減らし、コンバージョン率を向上させる上で重要です。 郵便番号を入力すると対応する住所を自動入力する機能（郵便番号による住所補完）は、住所フォームの改善方法として最も効

1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 ディレクター、UXデザイナーをしている大塚です。 今回は、5日間でアイデアを形にし、利用者に評価してもらい検証する「デザインスプリント」というプロセスについてご紹介します。 新規サービスを立ち上げたり、新機能を検討し、延々とブレストを繰り返し、いつまでたっても話がまとまらず、ようやくかたちになったら、あまり利用されずに終わってしまうということは、想像しているより良くあることです。 新製品の70-80％が投資分が回収できないという統計もあります。また、その失敗の理由の一番が42％で、市場にニーズがなかったというものです。熱意をもって開発

前回は、「⁠開発側にとって便利であるがためによく利用されているUIが本当に直感的にわかりやすのか、疑ってみよう」というお話でした。世の中でよく利用されているUIや、あなたやあなたのまわりにいる人たち、すなわちスマートフォンをすごくよく利用していてさまざまなUIに対する経験のある人たちであればすぐに理解できるUIが、実際にそのサイト、アプリケーションを使うユーザー層にとって理解しやすいかどうかはじつはわからないのです。 今回は、「⁠理解しやすい」よりさらに発展した発想である（と筆者が思っている）「⁠気持ちいい」UIと開発者の関係について考えてみたいと思います。 「気持ちいい」を要素分解すると見えてくる そもそも、「⁠気持ちいいUI」とはどういうものなのでしょうか。まずはどういう状況が「気持ちいい」のかを要素分解をしてみましょう。 処理速度が速く、処理の際の待ち時間が少ない わかりやすく直感的

UIには本来のサービスが成り立つ上で必要な機能に基づいた必須UIの他に、その必要機能についてユーザーに学んでもらうための学習用UIというものが存在します。本来であればサービスに必要なのは必須UIのみだったはずですが、リリース後やリリース前の段階においてユーザビリティテストを行なった結果があまり良くないのであれば改善をすることになります。しかし、UIのどこに課題があるのかの分析と改善には時間がかかり、実装などでも工数が発生することも考えると、より少ない手間で解決する方法が望まれます。今回は、このようなユーザビリティ上の課題を解決するために生まれた学習用UIのパターンをご紹介します。 参考：モバイルデザインパターン 第2版 ―ユーザーインタフェースのためのパターン集 使い方を学習するためのUIパターン もし新規のユーザーがサービスのコア機能の使い方がわからなければ、サービス自体を利用してくれな

「デザイン = かっこ良くすること」だとは限らない。 デザインとは? 設計 複雑な問題を整理して解決すること わりとエンジニアリングに近い 文章を書く練習をすれば読みやすい文章を掛けるようになるのと同様に、勉強すれば人を困惑させないデザインは作れる。 ヒューマンインターフェースの原則 インターフェース = 接点、境界面、接触面、接合面、仲立ち、橋渡し ヒューマンインターフェース = 人とモノをつなぐもの ヒューマンインターフェースの原則 = アプリがユーザーとコミュニケーションをする時の原則 1.必然性のあるビジュアル 機能と外見が調和しているか？ TPOにあわせた格好をさせる ユーザーとコミュニケーションを取る ドレスコードみたいなもの(例:ゲーム:楽しく、ツール:信頼性ありそうな) 機能に最適な外見を与えることで... 使い方がつたわる。 とっつきやすくなる 2.一貫性 アプリ全体でル

最新のeコマース調査で明らかになったのは、商品画像が大きくなり、レビューが充実して、割引が使いやすくなるなど、ショッピングサイトのユーザーエクスペリエンスが改善したということである。しかし、新しいデザインは、商品情報の非表示、サイトからの貧弱なフィードバック、カスタマーサービスエリアの情報過密といった問題も抱えている。 Ecommerce UX: 3 Design Trends to Follow and 3 to Avoid by Amy Schade on January 26, 2014 日本語版2014年3月11日公開 最近、eコマースユーザーエクスペリエンスレポートのシリーズをアップデートしているのだが、デザインの改善が見られることに我々は勇気づけられている。その一方、従来からの問題がまだ残っていることや、新たな問題も出てきていることにはがっかりした。 前回のeコマース調査の結果

アプリ開発のために、UIやUXといったデザインを考えなければいけない。そのためには、正しいメソッドをもとにデザインすることが求められる。THE GUILDの深津貴之氏は、QuadCameraやミニチュア風写真が撮れるTiltShiftGenの作者で、iPhoneアプリを中心としたUIデザイナーだ。 同氏がMOVIDA SCHOOLで語った「デザインを考えるために必要なメソッドとプロトタイピング」についてまとめた。 デザインの本質は「設計」 デザインは、表面的なものをキレイにすることではない。デザインの語源は「設計」であり、ものを整理したり整頓したりすることだ。目的を提案したり課題を解決したりすることが大きな方向性といえる。そのための手段として、ユーザ体験を考えるUXデザインや操作性としてのUIデザイン、情報をわかりやすく伝えるための情報デザインなどがある。 デザインは、センスではなくエンジ

小さなパッケージとしてのカード 前回の記事で、メッセージのやりとりという文脈にカード UI が組合わさることで、新たな利用者体験を提供できるのではないかという話をしました。コンテンツを『ページ』としてではなく、『小さなパッケージ』にして利用者に配信することが主流になりつつある現在。これは、Web 上の情報のあり方を再考せざるを得ないと同時に、利用者にとって理解しやすい（ページに代わる）メタファが必要とされているのだと思います。小さなパッケージの表現方法としてカード UI は、無視できないデザインパターンのひとつです。 カード UI の可能性を最初に感じたのは、2010 年に登場したPinterest。たくさんの画像を全面に出しつつ、概要や操作を統一感を持たせてコンパクトに表現しています。Pinterest がブレークした頃、無限スクロールや、隙間なく敷き詰めたグリッド表現が注目されました。

MEMOPATCHの読者の皆様はもうご存知かと思いますが、Goodpatchでは現在Prottというプロトタイピングツールを開発しています。どうして今プロトタイピングツールなのか、その裏話はいずれ掲載する予定ですが、今回はMediumにプロダクトデザイナーJames De Angelisがポストしていた、 “2014: Bringing design to life” という、プロトタイプを作り、実際にデザインを動かすことがなぜ大切なのかということについて書かれた記事を翻訳しました。ぜひチェックしてみて下さい！ （以下、2014: Bringing design to lifeの翻訳） 静止画のPSDファイルの時代は終わりました。もしあなたのデザインが動かなかったり、インタラクティブでないとしたら、それは何のインパクトも与えることが出来ないでしょう。過去1年間、FlintoやFramer.

「基本的に運営側がすることが正しいんですよ Webの世界ってそういう論理で動いてるんですよ」理論 実はここで言われている@masarakkiさんの意見はすごくわかる。「最高にクール」なUIがクソユーザー（便宜上、UIの良さがわからないユーザーを本エントリではそう呼ぶ）によって阻止されるのは中の人としては決して喜ばしいことではない。 ユーザーは「最高にクールなUI」がわかるか？まずこの問いから始めたい。一般ユーザーは「最高にクール」なUIがわかるか？ 答えはNOだ。彼らは「使いやすい」UIはわかっても「クール」なUIはわからない。そして「使いやすい」というのは結局各人の主観に依るものなので、この「使いやすい」UIというのは参考にはできても信用はできないものである。 この話を読んで真っ先に思い出した１つの話がある。 フラットデザインや新機種が評判どうか、というのはAppleにとっては意味が無い

【これはとてもひねくれた文章なので、「実用的な情報を速やかに収拾したい忙しいビジネス・パーソン」は読まないほうがいい。警告はした】 【役立つ部分をさくっと読みたい方はシンプル版を用意しました】 fladdict氏の『スマホUI考（番外編）　顧客やユーザーの要望に全て対応すると、アプリは99%破綻する』は素晴らしい記事だ。 その記事のコメント欄でのやりとりが気になった。 【某氏】　先生！　設定画面で全てのUI機能要素を　ON/OFFしたり、configファイルの編集でボタンのレイアウトを変更できれば良いと思います！ 【fladdict氏】　その思想をつきつめると、設定オンオフで音楽プレイヤーからFacebook閲覧までユーザーが自在に切り替えられる万能アプリへの道に進むのです・・・ 【某氏】　やりたいことが何でもできる万能アプリの複雑性と、デフォルト設定のシンプルさは両立しますからね。初めて

『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day

プログラミング教育や社員の健康をサポートする「CHO室」の取り組みなど、DeNAのCSRに関する情報を発信するブログ

まずはアイコン素材配布サイトから。 今は無料で使えるアイコン素材配布サイトが多いので、ここからダウンロードしてデザインする時に使う人も多いのではないでしょうか。まずはそのアイコン素材配布サイトで”save”と検索した結果を見てきます。 iconmonstr http://iconmonstr.com/ 以前にもMEMOPATCHで紹介した事のあるサイトです。ここはフロッピーディスクもありますがクラウドっぽいアイコンや下向き矢印のアイコンもありますね。 softicons http://www.softicons.com/ こちらはほとんどフロッピーディスクのアイコンです。しかも立体的なアイコンが多いです。 iconfinder http://www.iconfinder.com/ こちらもフロッピーディスクのアイコンが多いですが、下矢印やチェックマークもあります。 次に有名なサービスやアプ