2023-07-11:レバテックフリーランス様のサイトで当サイトがご紹介されました
サイト観察

3ヶ月続けた1日1サイトレビュー、3つの学びとやってよかったことまとめ

  /

こんにちは。mito（@mito_works）です。

今回は3ヶ月間毎日twitterに投稿を続けていた1日1サイトレビューの総集編です。
毎日コツコツと1日1サイトレビューをやってよかったことや学びをまとめます。

momo
momo
1日1サイトレビューは終わりにするの？？
mito
mito
次にやりたいことが見えたので1日1サイトをレビューするという意識的な取り組みは終わりにしますが、継続的に色々なサイトを観察し続けようと思います！
この記事はこんな人におすすめ
  • 他人の1日1サイトレビューの観察の仕方が気になる方
  • 1日1サイトレビューを3ヶ月続けるとどんな学びがあるのか気になる方
mito
mito
1日1サイトレビューってなに？という方はこちらをご覧ください。
Webデザインのインプットを増やしたい！それなら#1日1サイトレビューがおすすめです。こんにちは、mito（@mito_works）です！ 6月から開始した1日1サイトレビューも3週間が経過しました。 今回は、1日1サ...
1日1サイトレビューで気づいたステキなサイトに共通している2つのことこんにちは、mito（@mito_works）です！ 最初の頃は、1つのサイトのアニメーションやカラー、デザイン、フォ...

1日1サイトレビューで意識した観察視点

サイトは何かの目的やゴールのために作られているものなので、細かなデザインや表現手法だけでなく、誰向けのどういう目的で作られたサイトか？も想像しながら見ることを意識しました。

momo
momo
枝葉の部分ばかりに気を取られずに、森全体も見るようにしたということだね！

1日1サイトレビューでの3つの学び

学んだことをざっくり分類すると3つに分けられました。

3つの学び
  1. 世界観の表現手法は7つの要素の組み合わせだということ
  2. こだわりは細部に宿るということ
  3. ブレのない情報設計で見やすさが決まるということ
mito
mito
言い換えると「ブランディングの仕方、素人との違いの出し方、情報の整理整頓の仕方」といった感じです。

世界観の表現手法は7つの要素の組み合わせ

mito
mito
本当はもっと表現手法があるかもしれませんが、あくまで私がサイトレビューで気づいたことです。

この7つの要素の組み合わせで表現されていました。

  • 線の種類(ex.直線、波線、フリーハンド、ブラシ風 etc)
  • オブジェクトの種類(ex.幾何学図形、有機的な図形)
  • 色の使い方
  • 質感 ＆パターン(ex.触覚的テクスチャー(砂、レンガ、植物 etc)、視覚的テクスチャー(具トライプ、水玉、チェック模様))
  • フォント
  • 空間の使い方(静的)→余白のあけ方
  • 空間の使い方(動的)→アニメーションの付け方

事例①

フリーハンドの線、有機的な図形、紙のような触覚的テクスチャー、手書きフォント。
可愛らしく、手作りの優しい世界観が表現されています。

 

事例②

勢いのあるペイント文字、明るい黄色、ストライプの視覚的テクスチャーでおしゃれで都会的な世界観が表現されています。

 

事例③

写真をメインに動的な空間の使い方を工夫して、惹き込まれるような世界観が表現されています。

 

事例④

海を表現する波線、有機的な図形、砂などの触覚的テクスチャーも多用されていて、海辺の近くのゆったりできるホテルという世界観がきちんと表現されています。

 

事例⑤

特徴的なフォントと配色で世界観を統一するパターン。見事です。

こだわりは細部に宿るということ

作り自体は、要素の繰り返しでシンプルでもホバー時やクリック時の動きや、ボタンやオブジェクトの微妙なグラデーションで雰囲気は随分変わります。

事例①

「つらぬけアソビゴコロ。」というメッセージ通り、細かなアニメーションでワクワク感があります。

 

事例②

スクロールすると要素がフワッと出てくるアニメーション。動画の埋め込み。背景と部分的なイラストの重ね方。程よい手書き感が心地よいです。

 

事例③

要素の並べ方はシンプルだけれど、文字の出現のさせ方やグラデーションの細かい設定でとてもリッチな作りに見えます。

 

ブレのない情報設計で見やすが決まるということ

遊びを入れて楽しませるサイトなのか？読み物として読みやすいサイトなのか？で設計の仕方は変わってくるのだなと思いました。

momo
momo
どちらも両立させたい場合はそのさじ加減がポイントだね！

事例①

遊び心がありつつ、きちんと情報設計されているなと思った事例です。

事例②

情報にたどり着くための導線設計がしっかりしています。

 

個人的に好きなサイト

mito
mito
1日1サイトレビューを続けていると、自分の好きなデザインや表現方法がわかってきます。
momo
momo
どんなサイトデザインや表現方法が好みなの？
  1. 背景などに動画を埋め込み、動画を自然に使っている(見る人の目に何気なく触れる)
  2. 手書きの要素をうまく使っている
mito
mito
控えめに主張しつつ、遊び心があるサイトデザインが好きです！

好きなサイト

 

 

 

mito
mito
皆さんも自分のお気に入りを見つけて、デザインの引き出しを増やしてみてください！

まとめと次のステップ

1日1サイトレビューで学べること
  1. サービスや伝えたい想いをどのようにサイトという形にしていくかの考え方
  2. 自分の好みのテイスト理解

どちらも実際、自分がデザインする時に役立ちます。

mito
mito
サイトレビューをしていく中で、自分が表現したい世界観やサービス内容も明確になってきたのでポートフォリオのデザインにも活かせました！

mito | Web Designer Portfolio

 

【初心者&時間のない人必見！】ポートフォリオを2日で作る手順~#30DAYSトライアルDAY18~DAY20こんにちは。mito（@mito_works）です。 コーディングのスキルアップのために挑戦している#30DAYSトライアルの記録...
mito
mito
この動きやレイアウトはどうやって実現するのだろう？ということが気になり始めたので、実際に手を動かし（サイト模写）をして再現できるようになりたいと思います！

来月から、サイト模写にトライします。

 

1日1サイトレビュー
ABOUT ME
mito
こんにちは！mitoです。 フロントエンド開発、デザイン全般をやっているクリエイターです。 学ぶことと教えることが好きです。 子育てをする中で、自分の生活に働き方を合わせたいと思うようになり、2020年4月からフリーランスになりました。 好奇心旺盛でやりたいこと多め、ワクワクすると止まれない性格です。 同じように一緒にチャレンジする人の背中そっと押せたり、励ましあえるようなブログになるといいなと思っています。
RELATED POST