【1日1サイトレビュー】タグの記事一覧｜ミトラボ

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

mito — Thu, 26 Sep 2019 14:16:36 +0000

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

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

momo

1日1サイトレビューは終わりにするの？？

mito

次にやりたいことが見えたので1日1サイトをレビューするという意識的な取り組みは終わりにしますが、継続的に色々なサイトを観察し続けようと思います！

この記事はこんな人におすすめ

他人の1日1サイトレビューの観察の仕方が気になる方
1日1サイトレビューを3ヶ月続けるとどんな学びがあるのか気になる方

mito

1日1サイトレビューってなに？という方はこちらをご覧ください。

https://mito-lab.com/website-daily-review/

https://mito-lab.com/website-daily-review2/

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

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

momo

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

#1日1サイトレビューで観察していることまとめ

・サイトの目的は？（なんのためにつくられたか）
・サイトのゴールは？（どういう状態になってほしいか？）
・ターゲットの深堀
・ターゲットに基づくデザイン（カラー/雰囲気（世界観）/ フォント）

デザインをするときのヒアリングにも使えそう！

— mito@ひよっこwebデザイナー (@mito_works) August 24, 2019

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

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

3つの学び

世界観の表現手法は7つの要素の組み合わせだということ
こだわりは細部に宿るということ
ブレのない情報設計で見やすさが決まるということ

mito

言い換えると「ブランディングの仕方、素人との違いの出し方、情報の整理整頓の仕方」といった感じです。

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

mito

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

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

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

事例①

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

#1日1サイトレビュー
女の子のアイコンのインパクトをそのまま細部に使い印象に残るサイト。
ぶれない軸を感じます。

うふふどーなちゅhttps://t.co/2wwtoax1uh pic.twitter.com/F1mxKOgr7s

— mito@ひよっこwebデザイナー (@mito_works) August 15, 2019

事例②

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

#1日1サイトレビュー
背景を手書き風にするだけで生き生きとした雰囲気に。水彩、ペンキ、手書き文字を効果的に使っていて素敵です。

Starbucks breakfasthttps://t.co/oZdpPPs1b8 pic.twitter.com/2hcQMXfap3

— mito@ひよっこwebデザイナー (@mito_works) August 19, 2019

事例③

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

#1日1サイトレビュー
芸能人のオフィシャルサイト。商業的なサイトとは一味違う、作品として魅せる工夫やブランディング、世界観の作り方が勉強になります。

宮崎あおい　オフィシャルサイトhttps://t.co/k0DfxYACsc pic.twitter.com/PfWSkd6kmU

— mito@ひよっこwebデザイナー (@mito_works) September 4, 2019

事例④

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

#1日1サイトレビュー
泊まってみたい！行ってみたい！と思わせるデザイン。
世界観がきちんと整えられているからなのだなと。

うみのホテルhttps://t.co/WWUBOafhwy pic.twitter.com/cHtf4P4n9R

— mito@ひよっこwebデザイナー (@mito_works) August 21, 2019

事例⑤

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

色使いや文字のバランスが見事。
メインフォントはデザイン書体、メインカラーは赤と緑でなかなか難易度の高いデザインだと思う。#1日1サイトレビュー
たかしま農園https://t.co/gjEK7n5Ubj pic.twitter.com/hGlGNvaJvj

— mito@ひよっこwebデザイナー (@mito_works) July 15, 2019

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

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

事例①

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

#1日1サイトレビュー
余白やマージンが広めに取られていてわかりやすいサイト。
さみしく感じないのは、細かいアニメーション設定の効果だと思う。

サカモトhttps://t.co/5E19CAaMS8 pic.twitter.com/mLzdThAL55

— mito@ひよっこwebデザイナー (@mito_works) August 22, 2019

事例②

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

#1日1サイトレビュー
メインビジュアルのピンボケ感、スクロールした時の背景写真、色合いがすごく好み。
雑誌と動画の中間の動く読み物。
ターゲットから導きだされた配色だなぁと思った。沖縄に行きたくなる！！

久米島ぬちぐすいな旅https://t.co/TtVgKMO7Ff pic.twitter.com/MJRUbfVY5b

— mito@ひよっこwebデザイナー (@mito_works) August 8, 2019

事例③

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

#1日1サイトレビュー
ふわっとさせるアニメーション、写真の切り替え方、文字のグラデーション細部に渡ってきちっとデザインされているので
すごく心地いいです。

Beartailhttps://t.co/qfhhMtCO73 pic.twitter.com/urpyU1JBNh

— mito@ひよっこwebデザイナー (@mito_works) August 26, 2019

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

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

momo

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

事例①

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

#1日1サイトレビュー
ペン画のアニメーションの動き、読み物の写真のくりぬきを本型になど要所要所に遊び心が散りばめられているけれど、メニューしかり、
情報設計がちゃんとしているな〜と。

株式会社坂ノ途中https://t.co/B7EL443qXc pic.twitter.com/WSW8ffZJwB

— mito@ひよっこwebデザイナー (@mito_works) July 31, 2019

事例②

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

#1日1サイトレビュー

特に見てほしいページの導線の作り方。メニューに入れずに、オブジェクトorボタンにしてファーストビューの中に配置することでより強調されて、「何となく見ておいたほうがいいページなのかな」と思わせる効果があるんだなと。

さんすい保育園https://t.co/6n3qgrqqm0 pic.twitter.com/NwYPE1doDR

— mito@ひよっこwebデザイナー (@mito_works) July 22, 2019

#1日1サイトレビュー

色々な図形をうまく配置していて、遊びも加えながら賢そうに、知的に見せる技が特に勉強になります。

コダテルhttps://t.co/pXVLm8psMV pic.twitter.com/Wzlpvez59X

— mito@ひよっこwebデザイナー (@mito_works) July 22, 2019

個人的に好きなサイト

mito

1日1サイトレビューを続けていると、自分の好きなデザインや表現方法がわかってきます。

momo

どんなサイトデザインや表現方法が好みなの？

背景などに動画を埋め込み、動画を自然に使っている(見る人の目に何気なく触れる)
手書きの要素をうまく使っている

mito

控えめに主張しつつ、遊び心があるサイトデザインが好きです！

好きなサイト

#1日1サイトレビュー
雨の中で踊る印象的な動画から始まるサイト。
世界観表現の仕方に新しさを感じました。

Hellolifehttps://t.co/xDdddPvk71 pic.twitter.com/WDDpOs2xDM

— mito@ひよっこwebデザイナー (@mito_works) August 6, 2019

#1日1サイトレビュー
ワクワクするようなコーポレートサイト。見ているだけで楽しいです。
楽しいだけでなく、独自性、技術力やデザイン性の高さがしっかりアピールされています。

W3G合同会社https://t.co/FpuVSirg01 pic.twitter.com/5b3YNZkOCB

— mito@ひよっこwebデザイナー (@mito_works) September 2, 2019

#1日1サイトレビュー
トップで動画が自動再生されるのにサイト自体重くない気がする。
優しい光に包まれたような写真。丁寧に作り込まれた世界観が魅力的です。

タルタルガhttps://t.co/Bt7F462u4e pic.twitter.com/cRD4j8arcA

— mito@ひよっこwebデザイナー (@mito_works) July 24, 2019

mito

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

まとめと次のステップ

1日1サイトレビューで学べること

サービスや伝えたい想いをどのようにサイトという形にしていくかの考え方
自分の好みのテイスト理解

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

mito

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

mito | Web Designer Portfolio

https://mito-lab.com/coding-30days-18-20-portfolio/

mito

この動きやレイアウトはどうやって実現するのだろう？ということが気になり始めたので、実際に手を動かし（サイト模写）をして再現できるようになりたいと思います！

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

1日1サイトレビューで気づいたステキなサイトに共通している2つのこと

mito — Wed, 17 Jul 2019 01:33:03 +0000

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

momo

1日1サイトレビュー、続いているみたいだね！

mito

続いてますよ〜！毎日続けて1ヶ月以上が経過し、初期とは観察する目線も変わってきました！

最初の頃は、1つのサイトのアニメーションやカラー、デザイン、フォント、構成など細かくみてたのですが、最近は観察したサイト同士の共通点や1つのサイトについても少し抽象度をあげて達成したいゴールに対してどのように（サイト内で）アプローチしているのか？を観察するようになりました。

今回は、素敵だと思うサイトの共通点をまとめます。

mito

1日1サイトレビューのおすすめする理由はこちらを読んでください！

https://mito-lab.com/website-daily-review/

素敵なサイトってどんなサイト？

素敵！という要素には色々あると思うのですが、私が思う素敵なサイトの定義は、

わかりやすいサイト！

だと思っています。

mito

作り手の伝えたいこととユーザーの欲しいが情報がうまくマッチングしているサイトがわかりやすいと言えるのではないでしょうか。

ユーザー側

欲しい情報に迷わずパッとたどり着ける。

作り手側

伝えたいことがちゃんとユーザに届く

わかりやすいサイトに共通すること

結論からお伝えすると、

どんなサービスを提供しているのか一目でわかるメインビジュアル
サービスに対する想いや理念を伝える強いキャッチコピー

例えばタオル。

競合他社が多いく、日用品として毎日使うもの。商品自体も種類が多い。これをいかに他と差別化して売るか？どんな戦略を立ててサイトを作っているのだろう？という視点で観察しました。

CASE1

競合の多い日用品。
他と差別化するためにどうブランディングしているんだろう？という視点で観察してみました。#1日1サイトレビュー
育てるタオルhttps://t.co/ch9jbQ7WXY pic.twitter.com/94cAAZ2y7h

— mito@ひよっこwebデザイナー (@mito_works) July 14, 2019

育てるタオル。こちらはタイトルだけでなんだか長く使えそうな良品、高級なイメージが伝わってきます。メインビジュアルから想像するにターゲットも独身、おしゃれな男性にぎゅっと絞っています。

momo

ファーストビューでタオルに対する理念とどんな人に使って欲しいか？をパシッと示しているね。

CASE2

#1日1サイトレビュー
長々とした商品説明やブランドストーリーよりも全てを語る、キャッチコピーの一言がいかに強いかがわかるサイト。

正岡タオルhttps://t.co/nFcx30HvrG pic.twitter.com/i9LWApXhBR

— mito@ひよっこwebデザイナー (@mito_works) July 14, 2019

「TRUE TOWEL ただしく。やさしく。」のキャッチコピーがすごく強く、こだわって作られているんだな、天然素材使っていそうだ、きっと人にも環境にも優しいのだろうなというなということが伝わります。

mito

たった1つのフレーズでこれだけの情報量が含まれているってすごいですね。

（おそらくSEO対策で入れている）「大正10年から続く「老舗」今治正岡タオル」というの一文も信頼感、安心感を与えています。

分かりやすいサイトを作るための考え方

「作り手」と「ユーザー」の両方の視点で考えるべきだと思います。

作り手視点

（大前提として）私たちは何者で何を売っているサイトなのか伝わっているだろうか？

このサービスで特に伝えたいことって何だろう？

ユーザー視点

欲しい情報って何だろう？

買う/買わないの判断は何でしているのだろう？

まとめ

良い写真にはそれだけで力があると思いました。
さらに、「言葉」も上手に使うと、キャッチコピーの一言でブランドのほぼ全てを語れるのだなと。

mito

良い写真と強いキャッチコピーは最強です！

momo

強いキャッチコピーを作ろうと思っても難しいよ。。と思っている人はこの本を読んでみて！

「頭をひねってひねって考え出す」とは違う方法が書かれていて目から鱗です。
次回はこの本に書かれてある方法で実際にコピーを作ったことをまとめようと思います！

「爆売れ」コピーの全技術

posted with ヨメレバ

中山マコトかんき出版 2016年10月13日

楽天ブックス

Amazon

Kindle

mito

みなさんもサイトレビューをする際はテーマを持っていろんな視点で観察してみてください！

Webデザインのインプットを増やしたい！それなら#1日1サイトレビューがおすすめです。

mito — Mon, 08 Jul 2019 07:24:43 +0000

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

6月から開始した1日1サイトレビューも3週間が経過しました。
今回は、1日1サイトレビューを始めるきっかけから実際にはじめてどんな気づきがあったのか？という内容をお届けします。

「Webデザインのインプットを増やしたいけれど時間がない」

「Webデザインのインプットを増やしたいけれど何から手をつけていいかわからない」

という方の参考になれば嬉しいです。

#1日1サイトレビューってなに？

毎日1サイト、自分の気になるサイトをレビューし、#1日1サイトレビューというハッシュタグをつけてtwitterに投稿するものです。

Webサイトをみて自分なりの考察を行い、自分の言葉でアウトプットするということが目的です。

#1日1サイトレビュー

株式会社デジタル・アド・サービスhttps://t.co/2LVnaWSGMK

情報の目立たせ方が秀逸！
個人的には目玉焼きのような手書き風の楕円形が好きです。
きちんとした丸じゃないというだけで強調になるという発見がありました。 pic.twitter.com/jxtciiPOVO

— mito@ひよっこwebデザイナー (@mito_works) July 5, 2019

mito

色々なやり方があるようですが、私は自分用のストックメモとして日記アプリに書いたものをキャプチャでtwitterに共有しています。

#1日1サイトレビュー

HELLO CYCLINGhttps://t.co/JRSkPfi28g
サービス内容がわかりやすく表現されている上にワクワクするようなサイト。
デザインの威力、感じます。 pic.twitter.com/D9eAnlbdtF

— mito@ひよっこwebデザイナー (@mito_works) July 6, 2019