日本を代表するトップクリエイターたちは体験（エクスペリエンス）をどう捉え、デザインしているのか？ セミナーイベント「CODE Digital Creative Academy」で語れたその内容をお届けします。 デジタルを介して創造した「体験（エクスペリエンス）」により、成功したマーケティングコミュニケーション事例を顕彰する「コードアワード」。コードアワード事務局では、デジタルマーケティングやクリエイティブに関わるすべての方に向け、トップクリエイターのお話から業界の今と未来を考えるセミナーイベント「CODE Digital Creative Academy」を開催しています。 「コードアワード2018」から追加される「プロダクト＆サービス」賞の新設を記念し、第3回は「体験（コト）のデザインとは何か。デジタルマーケティングと結びつくとき、XDは一気に花開く」をテーマに3月13日（火）開催しまし

Amazonのすごさは圧倒的な品揃えとスピードだけではありません。ECサイトのUXデザインを考える上で参考にしたい、基本的な手法を紹介します。 Amazonのビジュアルデザインが劣悪で時代遅れだと、多くのデザイナーやUXエキスパートが同意するでしょう。それなのにAmazonからUXを学ぶ記事に違和感を抱く人もいるかもしれませんが、まずは読んでください。 Amazonのビジュアルデザインに改善の余地はたくさんありますが（特にユーザーの目が肥えてきたので）、UXに関してはAmazonから学べることがあります。実際AmazonのUXシステムは効果的で、2016年のアメリカにおけるオンラインショッピング成長の53%をAmazonが占めているとの研究もあります。 アメリカほど巨大で多様な国において、1社でショッピング売上成長の53%をも占めるAmazonの手法を紹介します。 1. 高精度なおすすめ紹

9月20日より配布が始まった最新のiOSである「iOS 11」。コントロールセンターの改良や「ファイル」昨日の追加など、複数の新要素が実装されている。 システムフォントの太さの変更や、いくつかのアニメーションなど、ところどころ見た目も変わっているiOS 11ではプリインストールアプリである「計算機」アプリのデザインも大幅に変更されている。

流行の新しいデザインよりも、そのユーザーに合ったデザインを提供することがよりよいUXにつながるのです。 「パーソナライズされたユーザーインターフェイス（UI）」は、もっとも注目される流行のデザインです。新しい概念ではありませんが、2017年のユーザーがコンテンツを閲覧する際に求める最後の1ピースなのです。 なぜか分かりますか？ UIデザインはバランスが大切です。デザイナーは効果が立証されたテクニックを使いたがる一方で、ブランドが競合の中で抜き出るために、新鮮なデザインを創る必要があります。 抜き出たデザインの決まった方法はありません。UIデザイナーは、効果が実証されたテクニックを駆使してユーザーを惹き付ける方法をひねり出そうと必死です。来週には古くなる流行デザインを追うのはなく、個人に合わせたユーザー体験を実現する「UIのパーソナライズ」を探しているのです。 パーソナライズとは具体的にどう

デザインの決定に無意識のうちに影響を及ぼす認知バイアス。悪影響を排除し、うまく活用するためのヒントを紹介します。 「認知バイアス」とは、人間の思考に見られる「誤り」の1つで、意志の決定に影響します。または、世界を認識する方法における「盲点」とも言えます。 認知バイアスはデザインにネガティブな影響を与えることがありますが、なかなか気づけません。意識することでスマートで客観的な決断ができます。 7つの認知バイアス IKEA効果 注意バイアス 奇異性効果 選択支持バイアス ダニング＝クルーガー効果 アンカリング効果 フレーミング効果 1.IKEA効果 「IKEA効果」の定義は、自分で組み立てたものに不釣り合いなほど高い価値を与える傾向のことです。 このバイアスの名前は購入者が自分で家具を組み立てるIKEAのビジネスモデルに由来しています。いくつかの研究によると、自分で組み立てたIKEAの椅子と完

今週公開した記事の中から、この週末に読んでおきたい注目記事をまとめて紹介。今週は、今年のWebデザイン5つのトレンド、素のJavaScriptでDOM操作する方法、SketchとInVision、CraftによるUIデザインの効率化など、話題の記事を中心に8本をセレクト。平日は忙しくてチェックできなかった人も、休日にゆっくりまとめ読みしてみては？ 【今週の一番人気】 見逃していない？ 2017年に生まれたWebデザインの5つのトレンド Webデザイナーならチェックしておきたい、海外発の最新トレンドを紹介。 【ソーシャルで話題】 もうjQueryには頼らない！素のJavaScriptでDOMを操作するための基礎知識 古いブラウザーのサポートが必要ないなら、もうjQueryを使わなくてもいいかもしれません。 【デザイナー・エンジニア必読】 開発者にもうれしい！ SketchとInVisionで

アドビは、4月10日を「フォントの日」と制定したことを記念し、都内でレセプションパーティーを開催。同社の日中韓対応フォント第2弾となる「源ノ明朝」に関するトークセッションを実施したほか、デザイン時のデッサンなどを展示した。アドビでチーフ・タイプデザイナーを務め、源ノ明朝のデザインを担当した西塚涼子氏のデッサンを、写真とともに紹介する。 デッサンには非常に細かな修正の跡！

D2C Rは、2017年3月22日、デジタルマーケティングの領域で活躍する専門化を招き、収益モデルが確立されたゲームアプリの一方、カテゴリごとに多様な構築と広がりを見せる「非ゲームアプリ」にフォーカスした「今注目企業が語る！ 非ゲームアプリのマーケティングセミナー」と題したセミナーを開催しました。 今回は、アプリのトレンドを膨大なデータから読み解くApp Annie 日本・韓国リージョナルディレクター 滝澤琢人氏、ヒットアプリを生み出し、ユーザーを増やし続ける企業からRetty株式会社 執行役員 内野友明氏、株式会社メルカリ シニアマーケティングスペシャリスト 鋤柄直哉氏を招いて開催したセミナーのダイジェストです。 （左から）株式会社メルカリ シニアマーケティングスペシャリスト 鋤柄直哉氏、App Annie 日本・韓国リージョナルディレクター 滝澤琢人氏、Retty株式会社 執行役員 内

デバイス、テクノロジーの進化やユーザー行動の変化は新しいトレンドをもたらします。コンバージョン率（CVR）アップにつながるUXデザインの新しいトレンドをまとめて。 新しい年には新しいものが登場します。Webデザイナーにとってのチャンスと挑戦は、最新のビジュアルトレンドとユーザー体験を取り入れることです。 しかし、Webの専門家なら誰でも知っているように、Webデザインには見た目以上に大事な要素があり、中でもUXはコンバージョンの過程で重要な部分を占めています。だから、私が所属するThe Deep Endもクライアントに好まれるUXの差を生み出す新しいトレンドはなにか、つまり、どの新しいトレンドを取り入れればコンバージョンを押し上げられるかを知りたいのです。 より役に立つ、または今年の売上を増やすツールをクライアントに提供すれば、自分たちが実際に価値を生んでいることになります。そして、高い報

コンバージョン率を上げ、短期的なビジネスゴールを達成するために、UXデザインの「ダークパターン」を採り入れる企業が後を絶ちません。4つの実例をもとにダークパターンの問題点を考えてみましょう。 多くの人もそうだったと思いますが、2016年11月8日、私はスクリーンにくぎづけになっていました。そのとき私が米国大統領選挙戦の結果をめぐって当てにしていたのはThe New York Timesでした。ほかのどのソースよりも信頼していたからです。 The New York TimesのWebページの一番上に、「選挙予想」というダイヤルがありました。 ダイアルが意味していたのは「大統領選に勝つ確率」で、左側に激しく揺れ動いていました。このとき私はすでに不安でいっぱいでしたが、それはどんどん高まっていきました。 New York Timesの記者、Jake Swearingenは次のように語っています。

UXを考え、デザインするだけで満足していませんか？ なぜ評価が必要なのか？ どう評価するべきなのか？ ヒントを探ります。 『クリムゾン・タイド』や『レッド・オクトーバーを追え！』など潜水艦映画を見たことがあるなら、いつも聞こえてくるある音に聞き覚えがあることだと思います。そう、暗闇の中から響いてくるような、「ピン！ ピン！」という警告音です。 もちろん、これはもっとも深く暗い海の中を進むときに潜水艦が用いるアクティブ・ソーナーの音です。「ピン！」という警告音はそれぞれ水の中に響き渡り、障害物をはじいたり、潜水艦を取り囲む周りの環境になにか変化があったときに知らせたりしています。 つまり、潜水艦は常に周りの環境をチェックするシステムを使っているということです。「ピン！」という警告音が途絶えてしまったら、潜水艦は実際にはなにも見えず、感じられなくなってしまいます。 UXテストもこれとあまり変わ

「購入ボタンは緑色がいいって専門家が言っている」「いや、Amazonのオレンジだ」なんて不毛な議論をしていませんか？ ディレクターやエンジニアにも役立つ、Webデザインで使える心理学のルールを3つ紹介します。 『ノンデザイナーこそ知っておきたい！デザインでセンスより大切な心理学のルール』では、Webサイトの成果を大幅に改善してくれる4つの有名な心理学ルールについて説明しました。今回は、色や人間の注意力持続時間、反応を研究したさらに3つの心理学ルールを紹介します。そして、ルールに沿ってWebサイトを改善し、より大きな成功を得る方法について説明します。 では、始めます。 ルール1：人間が注意力を持続できる時間は、毎年短くなっている 2015年、Microsoftは2000人の被験者を対象とする調査を実行し（調査結果PDF）、脳波記録装置を使って112人以上の人びとの脳活用をモニタリングしました

インデントにタブとスペースのどちらを使うのがいい？ JavaScriptにセミコロンは付けるべき？ JavaScript Standard Styleを使えばそんな論争にけりがつくかもしれません。 最近、注目を集めている@ferossのJavaScriptスタイルガイド、JavaScript Standard Styleを紹介します。チーム内での開発が円滑になり、プログラミングがより楽しくなります。 JavaScriptスタイルガイドのコーディング規約は、タブとスペースのどちらが良いかといった不毛な議論を無くし、コードに一貫性を持たせてくれます。JSLintやJSHint、ESLintといったLinterで使用できる多くのスタイルガイドのうちの1つです。 もしLinterが分からなければ、SitePointの記事『A Comparison of JavaScript Linting Too

小説サイトの日本語タイプグラフィをどう実装するか？　ユーザー体験をコード、実装でアプローチする技術コミュニティ「UX CODE」による勉強会「UX CODE IN GSS #2」が2月29日、ドワンゴで開かれた。 ドワンゴは、2月、中日本高速道路と共同で設立したIP製作委員会「NEFCO（ネフコ）」によるプロジェクトの第1弾作品として、芝村裕吏氏によるWeb小説「幻想交流』をスタート。スマホ、PCで見られる専用サイトを公開している。 この小説サイトでこだわったのが、小説の世界観を表現するフォントだ。ドワンゴの藤村拓也さんは、「あらゆるユーザーに小説を届けたい」と考えたときに、「Androidには明朝体がない」「MS明朝にアンチエイリアスが効かない」など、デバイスフォントの限界を感じたという。 そこで導入したのがWebフォントだ。最近は欧文をWebフォントで表現するサイトは珍しくないが、日本

「レスポンシブWebデザイン　マルチデバイス時代のコンセプトとテクニック」という書籍を2013年に上梓して2年が経ちました。この間、レスポンシブWebデザインも大きく進化しています。中でも、スタイルガイドを利用した制作アプローチは、レスポンシブWebデザインにおける新たな主流となりつつあります。 スタイルガイドとは スタイルガイドとは、ボタンや見出しといった、Webサイトを構成する部品の集合場所のことです。クライアントを含む案件に関わる全員が参照することで、それぞれのパーツがブラウザー上でどのように表示されるのか、どのように挙動するのかを確認できるようにするものです。デザインパーツや挙動を最終工程で確認する前に関係者間で共有できるのが大きなメリットです。 このほかにも、スタイルガイドには以下のようなメリットがあります。 生成されたCSSの集合体は他のページでも動作が可能 CSSの数は少なく

Photoshopを使ってアプリのUIをデザインするコツを学ぶ本連載。第2回以降は架空のiPhoneアプリを例に、実際にUIをデザインしていきます。 作成するのは、現在の空模様の写真を撮影し、位置情報とコメントとともにシェアする「お天気投稿アプリ」です。

「明朝体はこのままだとあと20年もすればこの世から消えてしまうかもしれない」。独立系フォントベンダーであるタイププロジェクト社長の鈴木功さんはそう語る。鈴木さんはタイプデザイナーであり、デザイン業界で評価の高いAXIS Fontの生みの親として知られる人物だ。 事実、明朝体を目にする機会は激減している。PCのWebブラウザーはもちろん、スマートフォン、タブレットといったデバイスの基本フォントはいずれもゴシック体。ニュースは新聞ではなくニュースサイトやアプリでチェックし、知りたいことは本ではなくググるかFacebookで尋ねる時代。紙媒体ですら、ゴシック体で堂々と本文を組む書籍が増えた。私自身、Web業界の経験が長い新人編集者に、明朝体で組まれた新刊のゲラを「なんか読みづらい」と言われてしまった経験がある。 「気持ちが悪い」から始まった、明朝体の居場所作り 6年前。鈴木さんには忘れられないエ

レスポンシブWebデザインやスマートフォンサイトなど、Webサイトのスマートフォン対応は今や当たり前。では、「メールマガジン」に代表されるマーケティングメールは、スマートフォンやタブレットにきちんと対応できていますか？ 本連載では、マルチデバイス時代に対応したEメールの考え方である「レスポンシブEメールデザイン」を紹介し、実際の作り方を5回にわたってお送りします。 �80% of people delete an email if it doesnʼt look good ontheir mobile device.” 自分のモバイルデバイスできれいに表示されないメールがあったら80%の人が消してしまう 毎日のように手元に配信されてくるメールマガジンは、海外ではこのようにレポートされています。 日本でもスマートフォンやタブレットなどのスマートデバイスの普及が高まり、Eコマースをはじめとした

紙媒体とWebのちがい……「読まれ方」の構造的な差 「見出し」のつくり方が今回のテーマです。一口に「見出し」といっても、広告やメルマガの中にあるテキストの小見出し、リスティング広告の見出し、ニュースサイトの見出し、それからポータル上に表示されるリンクテキストなど多岐にわたりますが、ここでは「本文が後に続くもの＝本文を読ませるための短いコピー」をまとめて「見出し」として定義します。ではさっそく、見出しづくりの基本的なメソッドから触れていきましょう……とはならないのがこの教室であることは、みなさんもそろそろお気づきのはず。まずは、「その手前にある余談」から入って行きましょう。 僕はセミナーなんかで余談を挟みすぎて持ち時間をパンクさせがちなので、担当者からは「余談少なめで」と釘を刺される講師なんですが、こうした余談を通じて、対話する相手とイメージや世界観を共有することは、セミナーであっても、文章

女子の足元でくつろぐ猫をFR10でこっそり……あっ、猫に対してこっそり撮ったのであって、女子に対してではありません。為念（2014年10月 カシオ EX-FR10） カシオ計算機から「EX-FR10」（実売価格4万5000円前後）というヘンなデジカメが出たのである。何がヘンかというと、カメラ部がコントローラ（モニター部）からガチャッと離れるのだ。あとは、モニター部からワイヤレス操作できるというワイヤレスカメラなのである。 というか、実はカメラ部とモニターはそもそも線でつながってないので、一見、両者が合体していてもワイヤレスなのである。 ワイヤレスだと何ができるか、というと、カメラと自分が離れてても撮れるのだ。フリースタイルカメラの登場である。 これで何をどう撮るかはアイデア次第だけど、一度やってみたかったのがこれ。 細くて軽い一脚の先にFR10のカメラ部を装着して手を伸ばせば、カメラ部だけ