Web デザインのロジック

Webサイトをロジカルに分析して、デザインや構成のセンスを身につけよう!

こんにちは、箱庭編集部 moです。
今週の週末読みたい本は、Webに関する1冊『Web デザインのロジック』です。
この本は、ユーザーからの反応がダイレクトに得られるWebサイトにおいて、どのような仕掛けや見せ方で、PVやユーザー数を増やしているのかをデザインとコンテンツ構成の面から解説している、いわばWebデザインの見本帳。デザイナーやクリエーターの方々にはもちろん、専門職ではないクライアント側のみなさんにとっても参考になること間違いなしの1冊となっています。

実例だから分かりやすい。

本書は、優れたWebデザインが多数掲載されているのでペラペラとめくるだけでも楽しめる内容となっていますが、企業・団体・店舗・デザイナーから聞き取ったWebサイトのコンセプトも掲載しているので、制作過程におけるクリエーターやクライアントのロジカルな思考も知ることができる1冊だそう。
実際に制作されたWebサイトを紹介していることから、気になったサイトは検索して実際に見ることができるのがいいところ。

実例は「コーポレート」「ブランド」「キャンペーン」「教育」「アート系」と分類されて紹介されているので、自分に合った傾向を見つけやすい作りになっています。本書では59の実例が掲載されていますが、今日は私が気になった実例をピックアップしてご紹介したいと思います!

Web デザインのロジック
こちらは「まるまるまるもりプロジェクト」のサイト。地域活性化の試みとして移住および起業家を募集するWebサイトです。
左ページに、このWebサイトを作るにあたってのねらいやキーコンセプト、デザインコンセプトなどが記されており、次のページからは実際のWebサイトのビジュアルに関して、ポイントが解説されています。

Web デザインのロジック
サイトコンテンツもポイントごとに紹介されています。トップページから詳細ページまで、どのようなサイト作りを意識したのかキャプションで解説。黄色いまるで“check!”と書かれた箇所が特にこのサイトのキーポイントになっているので、言葉通り要チェック!実際にWebサイトを見ながら本書を読むと、「なるほど〜。こういうことか!」と感じることができます!
スクロールの動きや画像が切り替わるスピードなど、本では伝えきれないデザインを実際に見て学べるので、ぜひサイトを見ながら読んでいただきたいです。

Web デザインのロジック
こちらは苺に特化したパティスリー「メゾン・ド・フルージュ」のサイト。数あるパティスリーの競合店と差別化を図るためのサイト作りが紹介されています。これから自分の会社やお店のWebサイトを作りたいと思っているみなさんも気になるのでは?

Web デザインのロジック
苺デザインに見られる「可愛らしさ」や「女の子らしさ」に縛られずに「苺」のおいしさや品種の違いなど、苺に対するこだわりやメッセージ性を前面に出したというレイアウト。実際にWebサイトをのぞくと、今まで見たことのあるパティスリーのサイトのイメージと違い、ピンク系のカラーを使いながらも洗練された美しさがあり、苺の魅力が存分に伝わってくるサイトだなぁと感じました。
トップページが本書で紹介されているものとビジュアルがちがってそちらも素敵だったので、ぜひメゾン・ド・フルージュのWebサイトをのぞいみてくださいね。

Web デザインのロジック
こちらは東京都内に点在するクリエーター向けのシェアオフィス「みどり荘」のサイト紹介。
右ページに掲載されているのはトップページのイメージですが、実際にWebサイトを見てください!みどり荘のコンセプト「良質なカオス」を表現したというデザインは、みどり荘を象徴する単語がめまぐるしく入れ替わり、動きのあるインパクトのあるトップページとなっているんです。

Web デザインのロジック
トップページとは変わって、サイトコンテンツではきちんと読ませることを前提に、クリエイティブな印象を感じさせる整ったイメージを意識してデザインしたそう。
コンセプトに合ったイメージをトップページで明確に表現しつつ、情報もわかりやすく伝えていて、とても分かりやすいサイトになっているなぁと感じました。

いかがでしたか?気になった3つの実例をご紹介しましたが、全59の実例はどれも気になるものばかり!ぜひ実際のWebサイトと照らし合わしながら読んでいただきたい1冊です。今後もWebサイトの重要性が増していきそうな今だからこそ、ぜひ手にとって読んでみては?