デザインの勘を鍛えるには？ 初見ウェブサイトからコンセプトを逆算してみる 【ILY,Bootcamp #02レポート】

Hello, people.

弊社では「デザイナーとしてのスキル（マッスル）を鍛える」を掲げて、オンライン勉強会「ILY, Boot Camp」に取り組んでいます。
今回実施したのは「参考サイトattack！」です。
とあるウェブサイトを題材に、特徴を見つけ、分析することで、デザインを論理的思考と柔軟性によって直感的に本質を見抜くことができる力、すなわち「デザインの勘」を高めることが目的です。

終了後、トレーニング後のような高揚感に包まれた？ILY,流デザイン・ワークアウトをレポートします。

今回参考サイトとして取り上げたのは「愛農学園農業高等学校」（https://ainogakuen.ed.jp/）。
この高校のウェブサイトを見ながら、メンバーは“逆算トレーニング”に挑戦しました。

デザインにはさまざまな手法がありますが、基本的には以下の流れでつくり出します。

デザインコンセプトを決定
→　キーワードやターゲットを踏まえてビジュアルを作成
→　デザインが完成

“逆算トレーニング”は、基本の流れを逆順にたどり、キーワードとコンセプト、そしてビジュアル表現へのつながりを学ぶ方法です。

完成したデザインから特徴を見つけ出す
→　特徴を分析し、キーワードやターゲットを考える
→　デザインコンセプトを導き出す

ここからは、実際にメンバーが体験した“逆算トレーニング”の様子をご紹介します。

特徴をたくさん書き出そう

既成のデザインからデザインコンセプトを導き出すために、まずはウェブサイトを見ながら各自で“気づき”をできるだけたくさんピックアップしていきます。

制限時間8分の中で、参加者は参考サイトを見て気づいたことや思ったことを自由に書き出していきます。

―ほどよい余白があり、1ページの情報量がちょうどいい
―シンプルなデザインなので、スマートフォンファーストなのかな？
―写真がきれい！
ーメッセージを強く感じる
―フォントやページ遷移のアニメーションなどに学校らしさを感じる
―天気と気温の表示が目を引く・・・農業高校ならでは？

メンバーごとに目の付け所が異なり、幅広い意見が挙がりました。
「情報量がちょうどよく、読みやすく感じるのは、レイアウトがきっちりしているからだと思う」「情緒的な写真は、教育理念である“三愛精神”からイメージしているのかな？」など、なぜそう見えるのかを考察し、特徴への理解を進めていきます。

特徴をもうちょっと分析してみよう

次に、集まった特徴をもう少し細かく分析していきます。
具体的に、以下の4点を考えてみます。

①ターゲット
②デザインキーワード
③表現要素
④コンセプト

①このウェブサイトのターゲットを考えてみる

ウェブサイトを設計するとき、「誰に見てほしいのか」「誰に訴えたいのか」は重要なポイントです。

このウェブサイトのターゲットを考えてみました。
「在校生」「受験生」「受験生の親」といった意見が挙がります。
ウェブサイトに記載されていた“採用情報”から「就職希望者」、“寄付のお願い”から「自治体」「OB」「地域の人」との声も。

次に、それらの中からメインターゲットを考えてみます。
やはり、今高校にかかわっている、あるいは今後かかわるであろう「在校生」「受験生とその親」がメインターゲットだろう。
加えて、各種補助金申請や、健全運営の報告という側面から「自治体」へのアプローチも考えられる、とまとまりました。

メインターゲット
・在校生
・受験生、受験生の親
・自治体

②このウェブサイトのデザインキーワードを考えてみる

デザインキーワードは、統一感のあるウェブサイトをつくるための土台です。

最初に集まった特徴を元にしたり、ウェブサイトを見たときの印象を思い返したりして、それぞれ書き出してみます。
いくつか共通点が見つかりました。
この高校独自のデザインキーワードといえますね。

デザインキーワード
―命と生きる
―質のいい教育
―三愛精神

③キーワードをデザインに落とし込む具体的な表現要素を考えてみる

デザインキーワードから実際のデザインをつくり上げるには、キーワードに沿った表現要素が必要です。
参考サイトではキーワードがデザインでどのように表現されていたか、要素として抽出し、言語化してみました。

1. 命と生きる

―写真、映像、メッセージ
―自然に触れ合っているシーン、実践しているシーン

高校で生活する人や動物だけでなく、空間もともに見せることで、命をはぐくみ学ぶ学校生活が窺えます。

2. 質のいい教育

―物差しのようなメニューのあしらい
―本をめくるようなページ遷移アニメーション
―しっかりしたレイアウトグリッドと無駄のない構成
―明朝体フォント

随所に「学校らしさ」が散りばめられているだけでなく、レイアウトグリッドによる丁寧な構成で教育機関としての信頼感も演出されています。

3. 三愛精神

―各ページに三愛精神が踏襲されたメッセージが散りばめられている
―写真や映像から得られる、宗教画を思わせる美しく慈しむようなイメージ

「神・人・土を愛する」という教育理念が、さまざまな形で登場し、強いメッセージとなっています。

前段階で考察したデザインキーワードと、表現要素がきちんとマッチしていることがよく分かりますね。

④デザインキーワードと表現要素をつめこんだコンセプトを考える

最後に、このウェブサイトのコンセプトを導き出します。

これまで考えてきたデザインキーワード（命と生きる・質のいい教育・三愛精神）と表現要素をまとめてみました。

―命に触れて、大人になることを学ぶ学校
―命をつなげ、人をつなぐ
―今を未来につないでいく
―生きる、育てる、学ぶ

ここからさらに一歩進んで、「このサイトを通して●●という学校であることを伝える」という“デザインコンセプト”にまで落とし込んでみます。
デザインコンセプトは、デザインの目的をより具体的に明文化する必要があります。
参考サイトの場合、前述のコンセプトに出てくるキーワード「生きる」「命」「学ぶ」「今・未来」から適切な言葉を選び出し、かつ「生徒はここで何を学ぶことができるのか」「学校は何を提供するのか」をターゲットに伝える文章が“デザインコンセプト”になるでしょう。

デザインコンセプト
このサイトを通して「命に触れて生きることを学び、学びの場を提供し、命をつなぐひとを育てる学校である」ことを伝える

特徴の書き出しと分析を経て、“デザインコンセプト”を導き出すことができました！

コンセプトを表すトーン＆マナーを考える

デザインコンセプトを形にするときに、ビジュアルやテキスト以外にも重要なのが「トーン＆マナー」です。
さらに踏み込んで「このデザインコンセプトの場合、どういったトーン＆マナーでウェブサイトを設計するか」を考えてみました。

＊トーン＆マナー：ブランディングにおけるデザイン・クリエイティブの表現をルール化したもの

参考：日本カラーデザイン研究所
（http://www.ncd-ri.co.jp/about/image_system/imagescale.html）

それぞれ、適切だと思うカラー・ワードを丸で囲んでみました。

トーン＆マナーを決定づけるのは、配色だけではありません。
今回の参考サイトの場合、「命に触れて生きる」というコンセプトは、宗教画を思い起こさせるようなファーストビューで表現されています。
また、「学ぶ場」としての信頼を思わせる明朝体のフォント。整ったレイアウトグリッドによる適切な余白の演出や、メッセージの読ませ方。
すべてが必要な要素として、この高校のイメージを生み出し、見る側に強く伝えてきます。

ターゲットに適切にコンセプトを届けるためには、多方面からのトーン＆マナーを考える必要があります。

「逆算トレーニング」から得られるスキル

勉強会を終えて、メンバーから「デザイン力を鍛える、といっても方法が分からなかった。“逆算トレーニング”なら、コンセプトからビジュアル化までぶれのないデザインをつくる練習になりそう」という声が挙がりました。

“逆算トレーニング”は、目から入ったものを“特徴”としてピックアップし、ターゲット・デザインキーワード・表現要素・コンセプトへと分解し、分析することで「なぜこの特徴がこのデザインに必要とされたのか」考えます。
この「なぜこの特徴がこのデザインに必要とされたのか」を考える力、つまり「デザインと表現要素の必然性」「デザインとコンセプトの軸」を読み取る力こそが「デザインの勘」です。
逆算トレーニングは、この「デザインの勘」を鍛えるよい訓練といえます。
さらに、はじめて見るデザインを深く追求することで、視点を深堀りし、語彙力を高める、という相乗効果も期待できます。

よいデザインをつくるためには、「デザインの勘」が重要です。
クライアントの想いを適切に、より強く表現したデザインをつくるためにも、引き続き「デザインの勘」を鍛えていきます。

Thank you, we love you.

私たちILY,は、ロゴ制作やビジュアルデザインなどの”見た目のデザイン”にとどまらず、MVV策定や事業・サービスのコンセプト設計などの”コトのデザイン”もご提供しております。お気軽にご相談ください。

Contact us