”Setロゴマーク”
2020年12月18日  |  Column

Setブログができるまで

はじめまして。株式会社Set アルバイトの櫻田です。

来春からはSetに就職予定のデザイナーの卵です。

 

余談ですが、髪を染めました。

さながら巣鴨にいるご婦人のような、あるいは旬のサツマイモくらいの赤紫です。いえ、ここはデザイナーらしくカラーコードで表すと、#711154 、でしょうか…実はこの色、ピアニー(peony)という牡丹色のようです。染めてから知ったので受け売りですが。髪に牡丹を纏うってとても素敵だな…とワクワクしています。(全然関係ないですが、フレグランスでよく見かける「ピオニー」は牡丹(芍薬)をイメージした香りのようです。初知り。)

 

髪を染めたところで別段デザイナーらしくなるわけではないのですが、それはそうと鏡を見るたびにテンションが上がるので毎日が楽しいです。Let’s 派手髪!

 

 

初回は備忘録も兼ねて、Setブログデザインの試行錯誤の様子を振り返ってみようと思います。

Setブログのはじまり

 

Setブログの話が持ち上がったのは2020年の4月ごろ。

学んだことや経験したことといったインプットを、文章という形でアウトプットする場を作ろう、というタルマさんの一言から始まりました。(詳しくはこちらの記事を。「描くことは、見ること。書くことは、考えること。」)

 

社内コンペの末、光栄なことに私の案を選んでいただき、タルマさんによるブラッシュアップと池田さんによるコーディングによってついに日の目を見ることとなりました!!

 

コーディングの過程は池田さんが記事で語っていますのでこちらもぜひ。

このブログのコーディングをした話」

デザイン過程 ①初案

 

こちらは社内コンペで最初に出した案です。

雰囲気

Setのイメージとして、スタイリッシュで洗練されているという印象を持たせたかったので、モノトーンでシンプルなあしらいでまとめました。

ヘッダー

ヘッダーはWebサイトで絶対に目にするコンテンツ。追従することも多いのでデザインにおいて非常に重要なパーツだと思っています。

今回はシンプルで垢抜けた印象を持たせたかったので、区切りを持たせないスケルトン型にしました。スケルトンなヘッダーは画面いっぱいにメイン部分を表示できることで、広々と、そしてシンプルな印象になるのでとても好きです。

 

デザイン過程 ②TOP画面

 

ここから、TOP画面の見せ方を検討しました。

 

今回は以下の3種類を制作しました。

左:注目記事をカルーセルで表示したパターン

中央:注目記事をサムネイル+タイトルで表示したパターン

右:ファーストビューでヘッダーを表示しないパターン

 

カルーセルによる注目記事のピックアップは、印象は明るくて良いのですが、「どの記事をピックアップするのか?」「どのように動きをつけるのか、あるいはつけないのか」といった運用上の問題点が出てきたため不採用となりました..

 

Top画面バージョン2

ブラッシュアップしたトップ画面がこちら。だいぶスッキリしました。

 

デザイン過程 ③記事画面

 

TOP画面が固まったのでそれに合わせて記事画面をブラッシュアップしました。

初案に比べて、タイトルや日付周りのメリハリをつけ、SNS共有ボタン等も設置しました。

 

 

デザイン過程 ④デザイン展開

 

TOP画面、記事画面に合わせて他ページへ展開させます。

左はAboutページ案、右はContactページ案です。

 

実装されたものは文字のウェイトが力強くなっていたり、必須事項の印がモノトーンになっていたりと改善されています。(About, Contact

About画面とContact画面

 

さいごに

 

下層ページまで0からデザインするのは今回が初めてだったので、試行錯誤の繰り返しでした。完成ページを見ながら、ここはこうすればよかったのか…と学んでいます。ヘッダー 周りとか、レイアウトとか…

Webデザイン、やっぱり楽しいし好きなので、もっと勉強していきたいです。次回もWebデザインについて書こうと思います!!