好きなWebサイトのここが好き！
この見出しに使われているフォントが可愛い！
このボタンの装飾、スタイリッシュでかっこいいなぁ！
みなさんはWebサイトを見ていて、「このデザイン好きだな〜」と思ったことはありますか？
わたしはあります！
ありすぎて、好きなWebサイトを見つけたら友達にシェアしまくります。
また、友達へのシェアでは飽き足らず、音声でも発信しました。
恥ずかしいので聞かなくてよいです。
と、言いつつ律儀にURLを貼っておきます。
お！noteにスタエフのURLを貼ると、自動的に埋め込み形式で表示してくれるんですね。
以前はそのままURLを貼ってもテキストリンクだったような……。
随時アップデートが出来るのが、Webサービスの良いところですよね。
Webではないプロダクトでは、なかなかこうはいきません。
例えば、チャック付きのパッケージではない普通のパッケージの食品があるとします。
内容量が食べ切れるのなら特に問題はありません。
でも、世の中には様々な方がいらっしゃいます。
少食な方や少しずつ食べたい方。
そういった方は食べ切らずに、保管しておきたいと思うかもしれません。
それの何が問題になってくるかというと、保管状態です。
密封状態で保管しないと、湿気の多い梅雨時はすぐ湿気ります。
秒で湿気ります。(語弊あり)
遮光性が高く中が見えないアルミ蒸着フィルムの場合はまだマシですが、透明で中の商品が見えるような袋だと、光や空気、水を透過するので、時間経過や保管状態によって、商品が酸化して味が変化してしまったり、湿気たりするのが早いです。
なので、商品をお買い上げくださったお客様から、パッケージにチャックを付けてほしいというお申し出をいただくことがあります。
チャックを付けたいのはやまやまなのですが、そのためにはかかるコスト(原価)から見直しをせねばならず、また包装に使用する機械も現在使っているものから新しいものへと総入れ替えしないといけないかもしれません。
なので、Webではない商品のアップデートをするためには、実際にいくつかの工程やコストの問題をクリアしないと採用されません……(弊社の場合)
しかし大企業の中にはお客様の声を積極的に取り入れて、随時改善の取り組みをされているところもありますので、一概には言えませんが。。
お客様の声はすごくありがたいです！
嬉しい感想をいただいたり、気づかなかったことに気づいてくださる方もいらっしゃるので。
Webサービスは更新と改善のスピードが速いので、お客様の声をすぐ取り入れられるのが強みですし、良いなと思います。
……何の話だったかな？
脱線しました。ごめんなさい。
というわけで、好きなWebサイトを語りたい！というレールに切り替えたいと思います。
※以下の文章は一個人の見解を多く含みます。
ご紹介するのはこちらのサイト。
FV(ファーストビュー)からめっちゃいい！！！！！！Bravo！！！！
Webサイトを構成する要素には、配色やフォント、レイアウト、導線設計、ライティングなど、色々とありますが、このサイトはその全てがすごく綺麗にまとまっていると思いました。
初めてサイトをご覧になった方は、「顧問編集者って聞きなじみのない言葉だな」と思われたんじゃないでしょうか。
聞き馴染みのない言葉には抵抗を抱く人もいると思います。
その抵抗感が、デザインによってうまく取り去られているなと思いました。
FVできっちりと何の会社か申し上げるという名刺のようなデザインで、それでいてスッキリとまとまっていて、すごいです。
タイピングアニメーションも軽快で小気味いい〜〜〜
配色も好き！
まず、アクセントカラーが蛍光グリーンで目を引きます。
モノクロのサイトですが、黒色にCMYKのK100の色も使用しているのがいい！
イラレだとK100はRGBのモードだと茶色く見えるんですよね。
その色の差異を、あえてWebサイトに使うセンスがすごい！！と思いました。
あともうひとつ！
ヘッダーのナビのリンクをホバーしたときの色と装飾も素敵！
リンクの上にマウスカーソルを乗せると、乗せたリンク以外のそのほかのリンクの色がグレーアウトします。
リンク自体の色を変えるのではなくて、周りの色の明度を上げて薄くしてコントラストを生み出すことで、今何のリンクを選択しているのか直感的にわかります。
さらに下線も付け加えることでアクセシビリティ的にもすごくいい！！と思いました。
すごい〜〜〜〜〜
コンテンツの方に行きます！
TOPページは構成が疑問の投げかけから始まっていて、LPのような構成になっています。
いい！！！！！！
この構成の何がいいかっていうと、発信をしたいけど事情があってできない人や、そもそも発信を諦めてしまっている人に対して、よくある悩みのボールを投げることで、
「あーちょうどこんなふうに思ってたんだよなー」って、ボールをキャッチしてもらえるんじゃないかな？と思いました。
ターゲットに自分のことのように思ってもらえるように「自分ごと化」を促して、自分がもし顧問編集者に依頼したならば？という、CVのその先をイメージしやすくする働きがあるんじゃないかなと思いました。
Webサイトを作る利点って、利用した後のイメージを湧かせることができるっていうこともひとつ挙げられるんじゃないかなぁと最近思っています。
あとは、下層ページのデザインもすごく好きです！
書籍の体裁を取っているのがすごく斬新だなと思います。
具体的には、冒頭に目次があって、1番下に次の章のページへのリンクが設置されてたり、というところです。
下まで読んで次のページにアクセスする。
また下まで読んで次のページへ。という導線設計が、まるで本のページをめくって読み進める感覚に似ているなと思いました。
下層ページで特に好きなのが、「顧問編集者とは？」というページです。
このページはストーリー性もあるなと感じました。
まず、顧問編集者とは？という入り口があり、
次にそれを受けて、じゃあ顧問編集者は具体的に何をするのか？と、入り口から広がっていく。
次のページはまたそれを受けて、どんどん広がっていくのかと思いきや、
ここで発想の転換が行われます。
ここで、そもそもなぜ経営者が発信するのか？という、問いに変わります。
この緩急の付け方がすごい！と思いました。
Webサイトってそもそも文章が読まれにくいものだとわたしは思っています。
合間にイラストや図が差し込まれているとはいえ、読まれにくいWebサイトにあえて長文を持ってきていて、
そして読ませるためのフックもきちんと用意しているというのが、面白いなぁと思いました。
さながら起承転結のあるお話を読んでいるような、ストーリー性を感じました。
あとは、文章もすごく素敵です！
キャッチコピーやコンテンツの文章は簡潔でわかりやすいものになっていて、気を衒った表現は排除している印象を受けました。
文章はとにかく、すごく丁寧だなと思いました。丁寧でわかりやすいことに重きを置いていて、ここから、丁寧に仕事をしてくれそうだなっていうベネフィットも生まれているんじゃないかなと思いました。
フォントも語らせてください！
フォントは装丁家の名久井直子さんも好んで使うという筑紫書体の組み合わせ！
強調したいところに明朝体のフォントをチョイスするところが素敵ですね！！
漫画でよく見るアンチック体は漢字がゴシック体になっていますが、アンチック体とはまた少し違った組み方になっていると思いました。
素敵でございます。。。
---
記事に書くことで、やっぱりこのデザイン好きだなぁと改めて実感しました。
普段の勉強やオンラインサロンなどで、もっと真面目にWebサイトの分析は行っていますが、仰々しいものではなく、ただ単に好きなものを喋るだけでもすごく楽しいし、いいなと思いました。
装飾だけでなく、もっとコンテンツ設計や導線設計にも目を向けていきたいです。
どうしても表層のデザインばかり目が行ってしまいます。
また好きなデザインのWebサイトを見つけたらこっそり書きたいと思います！
ここまでお読みいただきましてありがとうございました。
この記事が気に入ったらサポートをしてみませんか？