Webデザインの勉強で1日1サイトレビューを１週間してみた
こんにちは
だいごです。（＠D5ka38）
今回は、１週間で７レビューしたのでそこからの学びをまとめていきたいと思います。
まずは、1日1サイトレビューを始めた目的ときっかけをご紹介。
デザインの言語化にもってこいでした。
デザインの勉強をしているデザイナー志望の方。
デザインができるようになりたいエンジニアの方でも駆け出しでも勉強になることが多いです。
1日１サイトレビューとは
Twitterでデザインやプログラミングの情報を探している時に出会ったハッシュタグ。
デザイナーになりたい。デザインについて勉強してみたい
そんな人たちが勉強のために参考にしたサイトや紹介したいサイトを
独自の観点で、レビューしてツイートしています。
木になる方は、『#1日1サイトレビュー』をTwitterで検索してみてください。
1日1サイトレビューを始めたきっかけとは？
きっかけは、Twitterでこのハッシュタグの企画が動いていて
そのツイートたちを見かけたことです。
IT留学をして、プログラミングやデザインを勉強して、
実際にクラウドワークスやランサーズを通して、案件への応募をして
IT未経験で3ヶ月で1万円の報酬をいただけたことが初報酬で、4ヶ月目で9万円を稼げました。
そのことについては、別の記事でご紹介します。
そんな中で、さらに自主的に勉強していく姿勢を保つために
この1日1サイトレビューの取り組みを開始しました。
目的としては、
IT留学残り1ヶ月
時間をもっともっと
有効に使うためにTwitterで見つけた#1日1サイトレビューをやってみたいと思います
目的としては
・Webデザインの理解を深める
・言語化の練習
・デザインの引き出しを増やすため並行して何かに取り組んでみる挑戦。
— だいご@大学生セブでフロントエンド (@D5ka38) August 23, 2019
こちらになります。
1日目
1日目はwebサイトギャラリーから適当に選んだ、サイトをレビューしました。
サイトのメインカラー、ベースカラー、アクセントカラーの3つをフォトショップでまとめ
残りの情報をメモ帳に書き、スクショをあげました。
1日目。1日1サイトレビュー
◆レイアウト
◆フォントサイズ
◆フォント
◆自分なりの感想/使いがって/気づき
このように、レイアウト、フォント、気づきの3つのポイントでレビューを行いました。
ちなみに、1回目のツイートの反応がこちら
フォロワーが650名ほどで、インプレッションが616、エンゲージメントが98。
2日目
2回目の工夫はカラーの画像を4枚構成で現れた時にしっかりと３カラーが
見えるように配置を変えてみました。
インプレッションからの、プロフィールへの反応率は2％
1回目も同じような反応率なので、僕のアカウントでは
反応率が2％への収束がある可能性があります。
３日目
3日目からは沖縄出身ということもあり、地元沖縄のWeb業界の市場把握も含め
沖縄サイトレビューに少し路線変更してみました。
3日目にして、プロフィールへのアクセスがなくなりました。
考えられる原因は、ツイート時刻とフォロワーの飽き。
とういうもの、ツイートしたのが26時30分ごろ。
結果的に、10％のインプレッションが減って、プロフィールへのアクセルが０。
4日目
4日目の工夫は、サイトレビューやカラーを勉強がてらに見て欲しいので、
1枚目、2枚目にその画像を入れるようにしみました。
インプレッションも減る一方でした。
写真の配置や投稿時間以外にも、根本的にコンテンツの面白み、質が問題なのかもしれないです。
5日目
更新時間が改善できていないですね。
僕のアカウントではここが限界なのかもしれない。
6日目
今回からハッシュタグを増やしてみました。
1日1サイトレビューのハッシュタグではなかなか人に届かないと判断して、話題の「駆け出しエンジニアと繋がりたい」と「デザイン」を追加。
ハッシュタグを改善した効果が出て、200はインプレッションが増えました。
ただ、やはりインプレッションに対するエンゲージメントの割合は10％に収束しています。
7日目
7日目にしてレビューのフォトショップでテンプレートを作りました。
周囲の人からのアドバイスを参考に
・フォントサイズ
・ブレイクポイント
の項目を追加してサイトをレビューしていきました。
インプレッションに関しては、ハッシュタグをいくつか掛け合わせることで高められることが判明しました。
これから、どのハッシュタグならよりインプレッションが取れるのかを
改善していただければいいと思っています。
１週間サイトレビューをしてみてよかったこと
1日10サイトほどみて、１週間続けたので約合計70サイトほどみました。
さらに、Twitterで発信しながらサイトデザインについて勉強させていただきました。
- 圧倒的にWebサイトをみる数が増えた
- 最近のWebサイトの流行りが見えた
- 各サイトの導線にまで注意が行くようになった
- コーディング方法が少しつかめた
よくあるデザイン
1日1サイトレビューをしてよかった事で発見したよくあるデザインの特徴があこちら
- メインビジュアル・背景に動画使用
- コンテンツ幅が画面いっぱいの動きをつけたレイアウト
- たて、よこの文字を組み合わせたデザイン
- ナビが多い場合はPCでもハンバーガーメニュー
- ユーザーが心地いいグラデーションを使ったデザイン
- イラストを取り入れた、フラットなデザイン
- サイトの質、ユーザー離脱を防ぐローディングアニメーション
- CSS・gif・JavaScriptをなどをかけ合わせた動きのあるデザイン
以上の特徴がありました。
僕自身もWebサイト制作をするので、かなり参考になりました。
また、デザインについての情報や見方を言語化することもできました。
最後の方には、かっこいデザインやイケてるデザインを見るとテンションが上がるようになっていました。
ぜひ、1度、1日１サイトレビューに挑戦してみてください。