金沢シェアハウスのホームページ制作日記 #5 デザイン制作!カラー、フォント選びのサイトもピックアップ

金沢シェアハウス1

金沢のシェアハウスのホームページ制作をリアルタイムで発信中

僕の地元である石川県金沢市に2021年5月にシェアハウス G-eight HOUSE がオープンします!
無事クラウドファンディング達成できたそうです!!ご協力ありがとうございました^^

(※全回はアーカイブからご覧いただけます)

#5 デザインをつけていく! 、、その前にすること

デザインについて

本回はいよいよデザインの作成です。前回までに作ったワイヤー(骨組み)に肉をつけていきます。

今回も figmaをつかってデザインしていきます。とその前に重要なこと2点を決めてしまいましょう。

  • メインカラー
  • フォントファミリー

パレッタブルでメインカラーを決める

パレッタブル

ではまず、デザインを作るためのメインカラーを決めていきましょう。
“和モダン”,”金沢”というキーワードをメインにカラーの選定をしました。ブラックとゴールドをイメージしながら、こちらのパレッタブルというページで選びました。このページの素晴らしいところは、選んだ色にあうカラーを自動で選んでくれるところです。これで今回選定したのは上記のカラーです。
5つありますが、今回は右3つのカラーを使っています。

フォントファミリーを決める

晴れのそら明朝フォント

次にフォントです。フォント選びははっきりいってめちゃめちゃ難しい笑 実際に僕も基本は Noto sans JP をメインで使って、アクセントをつけたい所に違うフォントを使うというような感じが多いです。ただ、フォント一つでイメージがガラッと変わることも少なくないので、重要だということは頭に入れておきましょう!
今回は “和モダン” で検索した結果 ”晴れのそら明朝“というフォントが味があり良さそうだったので採用しました。タイトルや一部のセクションのみに使います。
参考までに、フォント選びでよく使うサイトを記しておきます

デザインをつけていく

やっとやっと本当のデザインづけです。説明は後にして、とりあえずこんな感じ。です。全体の画像は以下

金沢Toppage

ファーストビュー(一番トップのセクション)は少し旅館っぽい感じもしますが、金沢らしさを出せるように意識しました。またこれを補うためすぐ次のセクションの写真ではシェアハウス、共同での生活がわかるような写真にしています。
なお、セクションのタイトルはゴールド色かつ、先程の”晴れの空明朝”を使うことで区切れということがわかり、和モダンな雰囲気も演出できるようにしました。

(実は現段階でもっとしっかり空白のピクセルや、中央ぞろえ、セクション間の余白ピクセル数などをしっかり決めないといけません。まだこの辺りができてないので、すこしズレてる箇所もありますので後ほど修正予定です。)

まとめ

今回も実際のデザインづけは結構省略しましたが、この過程でだいた5時間程度。フォント選びに結構時間かかったりしています笑 
しかし、このホームができてしまえば、あとはホームのデザインをベースに下層ページを作るのでそれほど時間はかからないはずです。(フォントや色が基本同じものを使うので)

ただ、ファーストビューは正直まだ微妙な気もするので変える可能性大ですね^^;

クラウドファンディングありがとうございました!!

最後になりますが、クラウドファンディングが4月末を持って終わりましたが無事目標達成できたようです!
協力してくださった皆様ありがとうございました!! 特に僕は何もできてないですが、なんか嬉しいですね^^
よかったぁ。