【イベント報告】Webデザインの今を知る！Webデザイントレンド講座｜STUDIO山口

『Webデザインの今を知る！Webデザイントレンド講座』を開催いたしました！

みなさん、こんにちは！デジタルハリウッドSTUDIO山口スタッフです。

3月23日にオープンセミナー「Webデザイントレンド講座」が開催されました！
今回のイベントでは、各地でWeb関連の講師を担当されている、デジハリ教材でおなじみのデジタルハリウッド大学准教授の栗谷幸助先生をお招きし、Webデザインの基礎やトレンドについて教えていただきました。
栗谷先生は長年に渡りICT教育普及に携わっており、教育教育の場でICTを活用した実践や情報共有を行う教育者チーム『 iTeachers 』のメンバーとしても活動されています。また、「Webデザイン基礎入門」や「HTML＋CSS標準入門」などの本も出版されており、多方面でご活躍されている先生となります。

序盤では、ご家族の話などを踏まえて楽しく自己紹介をしていただき、和やかな雰囲気の中講義が始まっていきました。

Webデザインについて考える

まず、新聞、書籍、ラジオ、テレビなどのこれまでのメディアとWebの違いについて参加者のみなさまと考えていきました。

参加者のみなさまにお伺いすると「必要な時に必要な情報を調べられること」「検索性の高さ」「コピペが楽」など、様々な例が出ました。
どれもWebならではの視点で答えていただき、中でも「コピペが楽」という発想は栗谷先生が同じ内容で講義をした中で、初めての発想だったそうです。

栗谷先生によると、新聞、書籍、ラジオ、テレビなどのこれまでのメディアは自分から情報を探しにいかないといけないが、Webは「検索性が高い」ことが大きな特徴だといいます。

ですが、これまでのメディアも検索体験をするという意味ではいいものだとおっしゃられていました。

Webの5つの階層

Webサイトの構築には5つの階層があります。

①戦略階層
インターフェイス・システム：「ユーザーニーズ」「サイトの目的」

②要件階層
インターフェイス：「機能仕様」
システム：「コンテンツ要求」

③構造階層
インターフェイス：「インタラクション」
システム：「情報アーキテクチャ」

④骨格階層
インターフェイス：「インターフェイス・デザイン」
システム：「ナビゲーション・デザイン」
インターフェイス・システム：「情報デザイン」

⑤表層階層
インターフェイス・システム：「ビジュアルデザイン」

Webサイトの構築はこの①～⑤のステップを順番に踏むことでできるといいます。
基本的な流れに見えますが、実際は「④骨格階層のナビゲーションデザイン」や「⑤表層階層のビジュアル階層」から制作を始めてしまう方が多いそうです。
ここで大事なことは、「①戦略階層のユーザーニーズ」「②要件階層のコンテンツ要求」「③構造階層の情報アーキテクチャ」を飛ばすことなく、しっかりと作りこむことだとおっしゃられていました。

Webデザインを行う際の表現の2つの指標

次に、Webデザインにおいて大切な「装飾美」と「機能美」についてご説明いただきました。

「装飾美」は見た目の気持ちよさ、「機能美」は使いやすさを表現する時の指標となります。特に「装飾美」の独自性があることと「機能美」の安定感があることは真反対に位置しているので、この2つのバランスを取りながら制作をすることが大事だとおっしゃられました。

また、「デザインが得意なのか」「機能的な部分が得意なのか」をハッキリしておくといいそうです。
それは、転職やフリーランスを目指すにあたって、「自分の売り」が企業やクライアントにわかってもらいやすく、自分を見て頂きやすいからだとおっしゃられていました。

さまざまなWebサイトを見る

最後に講義前半で学んだことを元に、栗谷先生が選ばれた9つのWebサイトを「どのようにコンテンツの魅力を伝えているのか」、「どのようなデザインをしているのか」「最新のデザイントレンド」という視点で一つずつ詳しく解説していただきました。

上記のWebサイトで、栗谷先生が一番うなるポイントがあるといいます。
それは、「フッター」の部分です。

Webサイトは、コードでレイアウト表現します。
コードで表現するということは、つまり縦と横は揃いやすいということです。
その中で、テキストを斜めのラインと横のラインを保ちながら配置しているこのサイトは「めちゃくちゃうまい」とおっしゃられていました。