この記事の目次
Webクリエイティブゼミナール 第06回
前回はWordPressのAbout Meのページの内容を決めていきました。
また私の手持ち書籍の貸し出しを行い、それぞれに本を選んでもらいましたが、
その流れで自分は何を作り出したいかが少し見えたかもしれませんね。
ある人はWebページデザインを作りたい。
またある人はWebバナーを作りたい。
またまたある人はイラストを描きたい。
またまたまたある人は写真を撮影・編集したい。
・・・といったカタチでそれぞれに自分の武器となるポートフォリオ作品が見つかってほしいなと思っています。
さて今回は、オリエンテーションで予定していると紹介した「Webサイトデザインの分析」の手法を紹介したいと思っています。
以下の記事を参考に進めていきましょう。
Webデザインインプット術 〜7ステップでできる、デザイン力アップのための分析方法〜｜東京のWEB制作会社・ホームページ制作会社｜株式会社GIG (giginc.co.jp)
プラグインのインストール
今回から分析レポートをまとめていくため、記事の本文の記述を行なっていきます。
テキストを書き上げていく上で必須級の拡張機能（プラグイン）をインストールしておきましょう。
インストールの仕方や各種設定は授業内でレクチャーします。
プラグインページ：
Advanced Editor Tools – WordPress プラグイン | WordPress.org 日本語インストール・設定：
【2023年】Advanced Editor Toolsのおすすめな設定方法＆使い方を30枚超の画像付きで徹底解説【WordPressのエディタ拡張プラグイン／クラシックエディタ版】
Webデザインを分析する理由
どんなWebデザインを作りますか？
プロのWebデザイナーとしての仕事を行うのであれば、将来みなさんが作り出すのはどういったWebデザインですか？？
クライアントのご要望にそれとなく対応したデザイン？？テンプレートに当てはめて短時間で制作したデザイン？？
違いますよね？
求められている以上のクオリティかつ、機能性が高く使いやすい、
クライアントやユーザーそれぞれに喜ばれるWebサイトではありませんか？
つまり「ちょうどいいデザイン＝最適なデザイン」を作るべきだと思っています。
プロの仕事として行うのであれば、最高よりも最適を目指さなければいけません。
知識として蓄積させるためにインプットを行う
では「最適なWebデザイン」はどういったものになるのでしょう？？
それを知るために、現在世の中にはどういったWebデザインがあり、
どういった理由や狙いからその表現やそのアイディアを採用しているのか？を知る必要があります。
つまり知識として蓄積させるために様々な「インプット」を行わなければいけません。
そして案件ごとに最適なWebデザインを行えるようインプットを増やしていきましょう。
参考ページ内に「デザインをインプットする3つのメリット」という文章があります。
デザインをインプットすることは、「デザインを分析し、そのデザインの表現方法やアイデアを実際に使えるようにすること」です。使えるレベルにまで分析するメリットは、主に以下の3つがあります。
メリット1：あらゆるデザインに触れることで、デザインの表現・提案の引き出しが増える
→結果として、さまざまなお客様や要望に対して、柔軟に対応できるデザイナーになれる
メリット2：デザインをロジカルに分析することで、デザインを言語化して説明できるようになる
→結果として、お客様に根拠を持って説明できるようになるので、デザインへの納得度が高くなる
メリット3：あらゆる時代のデザインに触れることで、デザインのトレンドをとらえることができる
→結果として、時代の流行に合ったデザインができるようになるだけでなく、どうすれば没個性にならないかを意識できるようになる
よって、デザイナーとしての成長は、いかにたくさん、そして質の良いインプットをするかにかかっています。
参考ページ：Webデザインインプット術 〜7ステップでできる、デザイン力アップのための分析方法〜｜東京のWEB制作会社・ホームページ制作会社｜株式会社GIG
端的に言えば・・・
（メリット1）どんな案件にも安定の対応力がありながら、（メリット2）論理的で最適解を導き出す力があり、（メリット3）流行に対してもある程度対応でき、デザイナーとしてのアイデンティティも保っている。
・・・つまりデザインのインプットの工程は、
超優秀なWebデザイナーへの道しるべになるんです。
分析手順
では分析の手順です。
- ファーストインプレッションを言語化する。
- コンテンツからサイト自体の理解を深める。
- レイアウトや余白、配色、フォントの分析を行う。
- 各ブロックの分析を行う。
- キーアイテム、あしらいアイテム、アニメーションの分析を行う。
今回、私は見本として以下のWebサイトのトップページの分析を行いました。
みなさんがレポートを書く参考にしてもらえたらいいかと思います。
倉敷駅前で鍼灸院を営まれている「まんまる鍼灸院」様です。
現在はまだ記述途中ですが、こちらの分析を進めています。
このページを参考に、みなさんに渡したWordPressに投稿し一件の記事で分析レポートを記述しましょう。慣れるまで真似して書いてかまいませんよ。
1. ファーストインプレッションを言語化する。
STEP1：デザインをパッと見たときの印象を言語化する
デザインのファーストインプレッション（最初の印象）は非常に重要です。なぜならば、後に続くステップで、「どうしてその印象を受けたのか」を基準にデザインの要素（色味、フォント、要素の形）を分析することができるようになるからです。結果として、印象とデザインの要素を紐付けできるようになります。
たとえば、斜めのモチーフ（デザインの要素）を使用すれば、スタイリッシュさ（印象）を演出することができるという紐付けです。
GIGのコーポレートサイトをパッと見たときの印象は、「スタイリッシュ、かっこいい、洒落てる、スピードを感じる」です。またデザインの参考サイトで、どのようなカテゴリにこのWebデザインが属しているかも参考になります。たとえば、MUUUUU.ORGでは、GIGのコーポレートサイトは「スタイリッシュ」のカテゴリに属しています。
参考ページ：Webデザインインプット術 〜7ステップでできる、デザイン力アップのための分析方法〜｜東京のWEB制作会社・ホームページ制作会社｜株式会社GIG
まずはページを開いた際のファーストインプレッションを、
その時感じたそのままの感想で言語化してみましょう。
考えられた結果の言葉ではなく、感じたそのままというのが重要になります。
2. コンテンツから会社（お店）の理解を深める。
STEP2：ロゴ・文章・写真からブランド理解を深める
テキストを読めば「何をやっている会社・サービスなのか」、写真を見れば「会社・サービス・人の雰囲気はどんなものか」、そしてロゴのコンセプトなどを把握すれば、「どうしてこのデザインになったのか」など、デザインの意図がイメージしやすくなります。
GIGの場合、文章を読むと「Web制作に加え、Workshipといったフリーランスの人材マッチングサービスの開発、コンサルティング領域の商材の豊富さなど、テクノロジーだけでなく人と人とのコミュニケーションやクリエイティビティを大事にしている社風」が感じられます。また写真からは、20〜30代の若いメンバーが働いていることもわかります。ロゴに関しては、以下のような制作意図があることがわかりました。
〜省略〜
つまり、GIGのブランドは「テクノロジー、クリエイティビティ、いいものづくりを協力して行うことができる人たち（メンバー）」が重視されたものであると理解できます。
ここまでの「印象の言語化」と「ブランド理解」を行ってから、デザインの要素を分析していきます。デザインの要素を分析するときは「機能面」と「情緒面」を意識するようにしましょう。
機能面：情報設計、導線設計、視線誘導、視認性、ブランド周知
情緒面：どのような印象を与えたいか（どうターゲットに見られたいか）参考ページ：Webデザインインプット術 〜7ステップでできる、デザイン力アップのための分析方法〜｜東京のWEB制作会社・ホームページ制作会社｜株式会社GIG
次にすることはテキストや写真画像などの掲載コンテンツから会社（お店）の理解を深めることです。
テキストを読み、このサイトがどういった会社（お店）で、どんなサービスを提供してるのか、
写真画像などから会社やお店の雰囲気をつかみ分析を行いましょう。
上記参考記事でいうところの「ブランド理解」です。
3. レイアウトや余白、配色、フォントの分析を行う。
STEP3：レイアウト・余白を分析する
サイトの骨格となるレイアウトや余白の分析は、以下のような視点で行うことができます。
▼機能面
・要素の配置や余白が、視線誘導を効果的に果たしているか？
・関連する情報同士は近く、関連性が低い情報同士は遠く配置されているか？
など▼情緒面
・余白が広いことで落ち着いた優しい印象、反対に狭い余白は緊張感や力強さを感じる
・要素の配置が整頓されていると落ち着いた印象、反対に配置がずれていることでダイナミックでスピード感のある印象を感じる
などGIGのコーポレートサイトの場合、赤い線が視線誘導の流れになります。またファーストインプレッションや、GIGのブランドである「スピード感やクリエイティブ」な雰囲気を演出するために、比較的狭めな余白や、ずらしながらもバランスの取れた要素の配置になっているのではないかと分析できます。
STEP4：色味を分析する
GIGのコーポレートサイトの場合、黄色は機能的には「視線をセクションのタイトル（SERVICEやRECUIT）の部分に誘導する」という役割を果たしながら、情緒的には「”人”を大切にするGIGのブランドを表現するために差し色として黄色を入れて、親しみやすさや明るさを出している」と分析できます。
また、黒を基調としたグレースケールのロゴでブランドイメージを訴求しつつ、「テクノロジーやクリエイティブのかっこよさ」を表現するために、ボタンなどに黒を大胆に使用してデザインにメリハリを出しているのではないかと想像できます。
STEP5：フォントを分析する
フォントは、機能面では「Webフォントまたはシステムフォントを使用しているのか」「可読性や視認性を意識したサイズ、行間、文字間隔になっているか」といった視点が大切です。情緒面では「ロゴのタイポグラフィの雰囲気を踏襲しているか」「文章の語り口調と調和しているか」といった視点をもとにすると、分析がしやすくなります。GIGの場合、英語フォントについては、ロゴに使用されているフォントと似たものを使用することで、ブランドの統一感を出していると分析できます。また、日本語フォントにはシンプルで読みやすいゴシック体を使用しながらも、キャッチコピー部分で太く大きくすることで、ユーザーに呼びかけているような力強さや若々しさを表現していると考えられます。
参考ページ：Webデザインインプット術 〜7ステップでできる、デザイン力アップのための分析方法〜｜東京のWEB制作会社・ホームページ制作会社｜株式会社GIG
次に全体のレイアウトや余白、配色、フォントの分析です。
この項目はデザイン上で最も重要な項目ばかりです。
まず、レイアウトや余白で最も重要視するのは視線の誘導です。
Webページは基本的にスクロールのみでアニメーションさせる場合が多く、
ユーザーの視線をどのように誘導するかの設計は最重要な項目です。
配色、フォントに関してもデザイン上では非常に重要ですね。
4. 各ブロックの分析を行う。
ページ内のブロックの分析ですが、今回はページ全体の分析のみを行います。
次回以降でもっと深く、細かいブロック分けでの分析を行っていきたいと思います。
ウェブデザインBを受講してくれているみなさんならデザインラフを書いてくれていると思いますが、
ブロックの分析で行うことは「トップページのデザインラフを描いてみよう」の「参考サイトの探し方・選び方」の③と同じです。少し振り返ってみましょう。
5. キーアイテム、あしらいアイテム、アニメーションの分析を行う。
STEP6：あしらい
タイトル前のちょっとしたあしらいや背景のモチーフなどは、デザインにオリジナリティを出すスパイスになります。
GIGのサイトに使われている、背景の斜めモチーフや黄色い平行四辺形は、スタイリッシュ・スピード感・かっこよさを印象付けながらも、視線誘導を行う、ならびにGIGのロゴを継承してブランドの刷り込みを行うなどの機能的役割も果たしています。
また、ボタンをホバーしたときの丸みのある白背景が親しみやすさを演出し、「GIGで働くメンバーの人柄の良さ・暖かさ」を連想させるきっかけになっていると解釈できます。
STEP7：アニメーション
同じ見た目のデザインでも、アニメーションが変われば印象も変わります。動きの向き、スピード感を意識してアニメーションを分析してみましょう。たとえば、ゆっくりと動くアニメーションでは優しさ・重厚感を感じたり、スピード感があるアニメーションではスタイリッシュ、かっこよさを感じたりします。
GIGのサイトのスタイリッシュさは、直線的なアニメーションの動きに、そしてスピード感は、素早いアニメーションに由来しているものと分析できます。また、背景にあるグレーのあしらいが上から下に伸びるアニメーションによって、自然と視線が左のセクションタイトルの位置に移動していきます。
参考ページ：Webデザインインプット術 〜7ステップでできる、デザイン力アップのための分析方法〜｜東京のWEB制作会社・ホームページ制作会社｜株式会社GIG
会社（お店）のモチーフなどを使用したキーアイテム、
あしらいアイテムやアニメーションの分析を行いましょう。
レイアウト・余白・配色・フォントが最重要で骨の部分だとすると、こちらは肉の部分になります。
にぎやかしやアイデンティティになるアイテムをどのように使っているのか分析してみましょう。
初回の分析対象のWebサイト
では今度は分析対象のWebデザインを探してみましょう。
・・・と言いたいところですが今回は初回です。
最初の流れがわからないと勧めることも難しいですよね。
そこで初回の分析対象のWebサイトは私が決めたいと思います。
以下のWebサイトのトップページの分析を行いましょう。
岡山でドアや窓の建具の取り付けや製作を行われている白石建具店様です。
ボリュームや内容的にも最初の分析にはちょうどいいと思います。
このWebサイトの分析を今回・次回の2回で完成させましょう。
上記の分析手順、また私も更新を行う分析レポートを参考に記事を書いていきましょう。
次回記事の公開・私宛のメール送信によって提出とします。（後日提出方法を指示します）
皆さんに渡したWordPressは随時編集可能です。
練習がてら、どんどん分析レポート記事の編集を行なってください。
書籍を参考にポートフォリオの制作も進めよう
なお前回貸し出した書籍を参考にポートフォリオの制作も同時進行で進めてください。
ポートフォリオの制作に関しての相談も応じますので気軽に言ってください。
