お電話での無料体験レッスン予約・ご質問はこちら
受付時間 10時‐21時0120-746-555

イベントリポート一覧

2017.12.17
デザイン現場経験ゼロからわかる「超一流デザイナーの思考プロセス」

デザインのビジネスニーズが高まる中で、デザイナーが担うべき役割の重要性も増しています。

インターネット・アカデミーでは11月27日に、Web業界で活躍している3名のデザイナーをゲストにお招きし、第一線の現場においてデザイナーがどのような思考をしてデザインに落とし込んでいるのか、現場の実例を用いてお話しいただきました。

ここでは講演内容の一部をご紹介します。

デザイン現場経験ゼロからわかる「超一流デザイナーの思考プロセス」

セッション1AbemaTVのサービス開発から学ぶUIデザイン

はじめのセッションでは、株式会社AbemaTVのデザイナー清水康秀氏に講演をしていただきました。

AbemaTV立ち上げ期の開発フロー

AbemaTV立ち上げ期の開発フロー

テレビという受動型のメディアにおける視聴を、いかにスマホに最適化していくかということを考えながら動きのあるデザインを考えていたそうです。このときに重視していたのが動きのあるプロトタイプを作るということで、さまざまなツールを組み合わせながら、250個にも及ぶプロトタイプを作っていたそうです。

プロトタイプを作る中で、テレビの比率がスマホに適していないなどの課題が出てきており、そうした課題をクリアし動画の魅力を最大限に伝えられるデザインを考案。また、ユーザーが観たい動画に出会うためには快適なザッピングが不可欠で、UIの面で工夫し、画面の両端のスペースに他の動画がチラッと見える設計にする、切り替えた瞬間に動画の再生が始まるようにするなどユーザーの使い勝手を考慮してデザインをしました。

こうしたユーザーの利用シーンを想定した設計によりサービスの水準が高められているのですが、その背景には動きのあるプロトタイプの存在が大きく影響しているようです。デザイナーとエンジニアのやり取りでも、このプロトタイプを介することで互いの立場からの意見が出やすくなり、一方的ではないコミュニケーションが品質向上に貢献していたようです。

運用フェーズでのUIデザイナーの仕事

運用フェーズでのUIデザイナーの仕事

サービスをリリースした後は、いかに継続利用してもらうかが重要になります。そのため、UIデザイナーはユーザーの声を聞いたり、解析データを見たりしながら、インターフェースのデザインを調整したり、機能を追加するなどの改善を加えていきます。

UIデザイナーの仕事で肝になってくるのは以下のポイントです。

情報整理

AbemaTVでの実例を挙げると、リリース当初は動画の下に「マイビデオ」や「通知受け取り」のボタンが設置されていましたが、番組タイトルなどの基本情報の優先順位が下がってしまっていました。また、機能を追加していったときに、以前のデザインではどんどん縦に長くなってしまう設計になっていました。

そのため、ユーザーの使い勝手を考慮しインターフェースを再設計していったそうです。

ガイドラインを参考にする

ガイドラインを参考にする

UXを考慮する際に役に立つのがガイドラインです。

最近ではiPhone7 Plusなどのファブレットサイズのデバイスがどんどん増えてきており、ユーザーが操作する際に画面の上のほうにあるボタンに指が届きにくくなってきています。そこで、AbemaTVではAndoridのBottomSheetと同じ設計にすることで、この課題に対応しました。

こうしたインターフェースの設計をする際に効果を発揮するのがガイドラインで、インターネット上で公開されている様々なガイドラインを参考にすることで、ユーザーが普段から慣れ親しんでいる操作感を提供することができるようになります。

数値分析をもとに改善する

運用フェーズではGoogle Analyticsなどのアクセス解析ツールを活用し、反響を見ながら改善を繰り返すことが重要です。

たとえば、モバイルサイトではボタンの文字を少し変えるだけでもクリック率などの数字が変化しますので、そうした数字の変化を見ながらデザインを改善していきます。

AbemaTVでは、Twitterから流入するユーザーのアプリダウンロード率が低かったため、細かく見ていったところ、番組視聴者のTwitter連携コメントからの流入の数字が悪かったことがわかりました。そこで、そのデータを元に仮説を立てて改善をしたところ、課題となっている数字を大きく改善することができたそうです。

最後に、清水氏はUIデザイナーは日頃からさまざまなツールやガイドラインの最新情報を集めておき、考え方をアップデートしていくことが大切だというお話をされ、講演を締めくくりました。

講演者

株式会社AbemaTV
デザイナー
清水康秀 氏

サイバーエージェント2014年新卒入社。子会社である株式会社WAVESTの立ち上げにデザイナーとして参画後、映像配信プラットフォーム「FRESH!」のAndroid/Webなどのデザインを担当。2017年4月からはAbemaTVに異動しWebのデザインを担当。

株式会社AbemaTV

セッション2戦略的なWeb制作とデザイナーの心得

次のセッションでは、株式会社baigieのUX/UIデザイナー荒砂智之氏に講演をしていただきました。

超一流のデザイナーとは

超一流のデザイナーとは

まず、荒砂氏が考える「超一流デザイナーとは何か」というところからお話をしていただきました。

ジェシー・ジェームス・ギャレット氏が提唱するWebのUX5階層モデルでは「表層・骨格・構造・要件・戦略」の階層に分かれており、デザイナーは表層・骨格の階層の作業を行うことが一般的です。

WebのUX5階層モデル

  • 表層...ビジュアルデザイン(デザイナー)
  • 骨格...インターフェースデザイン・情報デザインなど(ディレクター、デザイナー)
  • 構造...インタラクションデザイン・情報アーキテクチャ(ディレクター、インフォメーションアーキテクト)
  • 要件...機能仕様・コンテンツ要件(プロデューサー、ディレクター)
  • 戦略...ユーザーの需要・サイトの目的(プロデューサー)

Web制作においては分業されていることが多いため、デザイナーが戦略の部分を理解せずに仕事をしているケースが多く、戦略とデザインがマッチしないということも日常的に起こりがちです。そのため、戦略レベルから理解し、それをデザインに落とし込んでいくことができる人が超一流のデザイナーであるとお話をされました。

戦略に必要な3つの要素

ビジネスには、経済状況や社会動向などのマクロ要因、ユーザーや競合他社の動向などの外部要因、会社の組織体制やブランドなどの内部要因といった、さまざまな前提条件が絡んできます。これらを考慮しながら「マーケティング・ブランディング・UX」の3つの要素を考慮して戦略を立てる必要があります。

  • マーケティング...売れる仕組みをつくること
  • ブランディング...企業や商品に対する好意的なイメージを顧客の頭に残す
  • UX...なぜ今UXが重視されるのか、市場環境の変化と技術環境の変化

UXには、近年の市場環境では、モノ消費よりもコト消費が重視される傾向が強くなってきており、ユーザーは機能よりも体験に価値を感じているという背景があります。高性能の機能を搭載したPS3よりも家族みんなで遊べるWiiに注目が集まった背景には、こうした市場環境の変化の要素が絡んでいます。また、スマートフォンの普及によって多くの人が様々なアプリ、サービスを通じて高品質なUXに触れる機会ができたことも、UXが注目される要因の一つであるとのことでした。

戦略的なWeb制作

戦略に必要な3つの要素

Webサイトの制作の前には戦略と設計を考えるプロセスがあり、優れたデザインをするためにはこれらへの理解が欠かせないと荒砂氏はお話をされていました。

戦略・設計

まず、デザイン対象のビジネス構造を理解することが重要です。Webサイトはあくまでクライアントのビジネスのなかの一部の役割を担うものですので、オンライン・オフラインを含めた全体像を認識しましょう。

また、ユーザーがWebサイトの中をどのように巡回して目的を達成させるのかを知ることも大切です。ユーザーは必要なページだけを見ます。そのため、Webサイトに訪れるのはどのようなユーザーなのかというユーザー像(ペルソナ)の数だけ行動シナリオを考え、検証することが大切です。

それを元に、「問題提起:ユーザーに問題を提起し課題や価値基準を共有する」「結果:どのような結果が得られるのかを明確にする」「実証:結果が得られることを具体的に証明する」「信頼:提案者を信頼してもらう」といったようなマーケティングストーリーを構築し、サイトマップやワイヤーフレームに落とし込んでいきます。

設計の際には、ワイヤーフレームなどのドキュメントを通じて、画面の構成要素が適切かどうか、戦略で検討された前提や意図が画面内に反映されているかなどをチェックします。

制作

デザイナーはサイトマップやワイヤーフレームを通じて、それぞれのページの目的を把握していきます。このときに大切なのは、戦略と設計の流れを必ず踏まえたうえでビジュアルを作っていくということです。ただ格好良いだけで戦略が踏まえられていないものは好ましくありません。

実際のデザインにおいては、必要最小限のルールで構成要素を表現していきます。また、モーションデザインを検討する際には明確な目的意識をもって動きを検討する必要があります。目的のない過度なアニメーションはユーザビリティを低下させ、目的から遠ざかることになるため注意が必要です。

超一流デザイナー3つの心得

荒砂氏は、超一流のデザイナーの心得として「論理から逃げない」「説明から逃げない」「文字から逃げない」という3点を挙げていました。

論理から逃げないとは、デザインには細部に至るまで意図が必要で、クライアントのビジネスとデザインが論理的に結びついていないといけない、その論理を軽視して情緒的な表現を押し付けるのは好ましくない、ということ。

説明から逃げないとは、デザイナーには説明責任があり、作成したデザインを提出する際にはデザインの意図や論理の説明をする必要がある、デザインを提出して終わりというのは避けるべき、ということ。

文字から逃げないとは、文字もUIの一部と捉え、文章の長さや言い回しを調整する意識が大切、ワイヤーフレームはあくまでも構成要素の伝達のツールで、デザインにあてはめた際の文字の表現についてはデザイナーも積極的に責任を持つべき、ということ。

超一流デザイナーは、こうした3点は当たり前に心得ているものだというお話でした。

超一流に近づくための行動

超一流デザイナーに近づくための行動

まず、一流の人は自分の限界を超えたい、前よりも良くしたい、といった考え方を持っており、失敗から学びプロセスで改善をするなどの行動も伴っています。

一方で三流の人は、自分にできる範囲で済ませたい、使いまわしをして楽をしたい、といった考え方があり、失敗した際も原因を深堀せずに場当たり的な仕事をする傾向にあります。

まずはこうした考え方を一流の人に近づける必要があります。

また、一流になるためには費やす時間の量が重要です。

ベルリン芸術大学のバイオリン科では、卒業後の活躍度を分類し、それぞれのタイプの人がどの程度の時間をバイオリンの練習に費やしたのかを調査しました。その結果、世界的な活躍ができる人は一般の人の倍以上の時間を費やしていることがわかりました。

こうしたデータからもわかるように、まずは費やす時間の量が重要です。しかし、仕事で使える時間は限られていますし、単純に仕事時間を増やせばよいということではなく、質も伴っていることが前提となります。

質を上げるためには限界的練習、つまり自分にとっての安全圏、心地のよい領域を抜け、痛みや緊張を伴うような、限界を超える負荷をかけつづけることが大切です。普段の自分ではできないことにチャレンジをし続けることで、時間の質を高めることができます。

時間の量と質を掛け合わせた総量が大きい人が超一流になり得るとして、荒砂氏は講演を締めくくりました。

講演者

株式会社baigie
UX/UIデザイナー
荒砂智之 氏

数社のグラフィックデザイン会社、Web制作会社を転職したのち、2011年にベイジに参画。UX/UIデザイン、情報設計、アートディレクションを手掛ける。ロゴデザインについても多数の実績があり、タイポグラフィ年鑑への入選歴もあり。近年はブログを中心に社外に向けて活動範囲を広げている。

株式会社baigie

セッション3実案件におけるデザインの考え方

最後のセッションでは、株式会社DONGURIのデザイナー永井大輔氏に講演をしていただきました。

ケーススタディ

ケーススタディ

デザイナーの役割はクライアントのコーポレート・アイデンティティ(CI)を理解し、それをもとにUXを設計しエモーショナルな表現を行うことにあります。永井氏は実際に手掛けた案件を元にデザイナーとしての仕事について語っていただきました。

永井氏がケーススタディに挙げたのは、歯科医師を専門としたWEBマーケティング/経営コンサルティング会社の案件でした。この案件では、リニューアルに必要な導線設計からタッチポイント開発を担当したそうです。

ブリーフィング

クライアントからヒアリングしたところ、「競合他社との差別化を図りたい」「ロジックではなくエモーショナルな印象を強化したい」といった要望が出てきました。そのなかでも難しかったのが「既存のブランドイメージで使っている武者のイラストを引き続き使いたい」という要望で、武者と歯医者という無関係なイメージを結び付けるのに苦労したそうです。

そこでまず行ったのがユーザー調査で、クライアントを通じて顧客へのユーザーインタビューを実施しました。その調査の結果から、クライアントの顧客の趣向と武者のイメージを紐づけることは可能ということがわかり、デザインの方向性が見えてきたそうです。その他の案件ではインターネットアンケートのサービスや、一般公開されている定量調査などのデータを活用することもあるとのことです。

UI設計

UI設計

ここでは顧客のペルソナを元にして、ユーザーがコンバージョンに至るまでの導線設計を行います。その際にカスタマージャーニーマップを作成し、その内容をもとにWebサイトで必要な要素を洗い出していきモックアップを作ります。

永井氏はモックアップの作成にはAdobe XD CCを活用しており、紙で提出するよりもクライアントに理解してもらいやすくコミュニケーションがスムーズに進むようです。

キービジュアル

設計に基づいてユーザーに伝えるべき印象を検討していきます。今回のケースでは先進性・ハイブランド・信頼感といった印象を与えることを重視したそうです。

そのうえで、デザインコンセプトを決めていきます。ここでは、メンバー間でブレストを行い、デザインコンセプトとなるキーワードをアウトプットしていきます。

今回のケースでは、和を感じる墨のタッチと幾何学なグリッチを組み合わせたハイセンスな表現をコンセプトに、キービジュアルを複数案作っていきました。

デザイン

これまでのフェーズで策定してきたキービジュアルとデザインコンセプトを設計したUIに落とし込み、最終的なデザインを作っていきます。

デザイナーによってさまざまな考え方や手法がありますが、永井氏の場合はデザインコンセプトを4つのキーワードに細分化してデザインの方向性を決めていくそうです。

今回のケースでは、武者の刀の斬撃をモチーフにした「斜線」、武者のイメージの「漢字」、クライアントの要望にあった信頼感から連想した「金色」、和の要素に幾何学要素を組み合わせる意図の「縞」を設定し、デザインを仕上げていったそうです。

実装

UI設計

デザインが仕上がり、実装のフェーズにおいては作業を高速化するためにさまざまなツールを活用しています。永井氏は、Gulp(タスクランナーツール)、Pug(HTML)、Sass(CSS)、CoffeeScript(JavaScript)などを活用して作業の高速化・高速化を測っているそうです。

こうしたプロセスを経て完成したサイトでは、目標としていたKPIを大きく上回っただけではなく、クライアントにコンセプトを気に入ってもらえ追加の案件にも発展したそうです。

最後に、永井氏はデザイナーとしてスキルアップをするためにはゲーム、漫画、ドラマ、小説、映画、旅行などにもデザインのヒントは転がっており、デザイナーとしてアンテナを張りインプットを続けていくことが重要だと講演を締めくくりました。

講演者

株式会社DONGURI
デザイナー
永井大輔 氏

学生時代に出場した第47回および第48回技能五輪全国大会ウェブデザイン職種部門において2年連続で金賞を獲得。現在は「歌って踊れる」をモットーに、ロジカルとエモーショナルを両立させたクリエイティブを制作している。

株式会社DONGURI http://daisukenagai.com/

Webデザインを学びたい方へWebのプロフェッショナルが
マンツーマンでご案内

Webのプロフェッショナルがマンツーマンでご案内

まずは無料体験レッスン
無料相談からスタート!

日本初そして唯一のIT・Web専門スクールのインターネット・アカデミーでは、「Webデザインについて学びたい」「自社サイトのデザインのレベルを高めたい」という方に向けた無料体験レッスンを行っています。また、企業研修をご検討の方に向けた無料相談も承っていますので、お気軽にご連絡ください。

Webを学びたいすべての方へ無料体験レッスン実施中

インターネット・アカデミーは、Webデザインやプログラミングなど、Web・ITが学べる日本初の専門スクールです。一人ひとりのご要望に合わせて、キャリアカウンセリングやレッスンを無料で体験して頂けます。

無料体験レッスンのオンライン予約