プログラミング初心者の勉強ブログ #63
先月1ヶ月間のWebデザイン勉強のアウトプットとして、オリジナルHPを作成しましたので、そちらを作るにあたって色々思ったことを書いていきます。
目次
[toc]
オリジナルHP紹介
[blogcard url=”https://supunic.com”]
「supunic」という名前で会社を立ち上げる予定なので、今回はそのHPを作成しております。「アイデアをカタチに」という、それっぽいコンセプトを掲げてますが、文章が欲しくて仮で書いたものです。
様々なサイトのデザインを参考にして作成しました。「about」「works」「contact」の3セクション構成の簡単なもので、フレームワーク等は使用せずHTMLとCSS、あと少しだけJavaScriptを加えました。
また、Wordpressでの作成ではなく、自分で書いたHTMLやCSSファイルをレンタルサーバーに直接アップロードしております。
ロゴ
まずロゴのフォントを何にするかをいろいろ考えました。何でもいいっちゃ何でもいいんですが、自分が結構フォントの形とか見るの好きなので、色々調べてました。
今回「supunic」に使用したのは、「Akzidenz Grotesk」というフォントです。 アクチデンツ・グロテスクと読みます。グロテスクと聞くとちょっとアレですが、サンセリフがフランス、ゴシックがアメリカ、グロテスクがドイツの言葉というだけで、ほとんど一緒の意味みたいです。
「Akzidenz Grotesk」は、19世紀から使われている古典的なサンセリフ書体で、サンセリフ書体界で有名なヘルベチカ（Helvetica）のもととなったとか何とか。ぱっと見ヘルベチカとほとんど一緒なんで正直見分けつくかわかりませんが、個人的にはアクチデンツ・グロテスクは若干横長な印象で、ヘルベチカより洗練されてない感じに味がある気がします。
ぱっと見の印象と、あえてこれを選ぶ渋さがありだなと思い、選定しました。
ロゴで使用したので、各セクションの見出しも今回は「Akzidenz Grotesk」にしております。反復の原則とやらです。
トップページ
PC表示では、トップ画面は2カラムです。左にロゴ、右にvideoタグでオートリピート再生される動画を設置しております。左側の白いカラムですが、ロゴだけだと流石に寂しかったので、左上に「ー Make an idea real.」という文字をfixedで固定して表示しました。
大きいサイズで動画を差し込むと、動画自体に動きがあるので要素が寂しめでもいける気がします。もう少し目を引く動画の方がよかったかもしれませんが、グレースケール80%で調整した、このなんとも言えない水色をした動画と、白のカラムの組み合わせが気に入っているので、これはこれでいいかなって思ってます。
スマホ表示は、白のカラムを消し、動画の上に文字を載せております。他サイトでもよく見かける、2カラムからのレスポンシブ対応手段の一つだったので、真似させていただきました。「ー Make an idea real.」のfixedされた文字はこの画面では消しております。
グローバルナビはハンガーメニューに切り替えております。ナビについては次の「ヘッダーナビ」で紹介します。
ヘッダーナビ
PC表示では、ページトップから400ピクセルスクロールした際に、ヘッダーナビの色と形を変化するよう、JavaScriptで設定しております。widthを70%→100%に変え、transitionプロパティでアニメーションをつけると、このようなグインと伸びるような動きになります。ちなみに全部ease-outです。
スマホ表示のバーガーメニューのアニメーションはこだわろうかなと思っていたのですが、いろんなバーガーメニュー見てるうちに、だんだんシンプルな方が良くないかって思い始めて、普通にフェードインさせてます。しばらく時間おいて改めて見たときに、ちゃっちい印象だったらそのときは差し替えようと思います。
worksセクション
ここの画面は開発したアプリなどを載せる予定です。まだ何も載せておりません。画像は他サイトのスクショなので僕とは全く関係ないものです。
hover時にscaleの拡大設定と、filterのグレースケールをnoneに戻して動きをつけております。
全体の構成
PCではどのセクションも、hoverの際にfilterをグレースケールからnoneに切り替える設定しております。スマホ画面は最初っからカラーです。
基本的にデザイン4大原則に則って作成しております。
デザイン4大原則については、
【HTML/CSS】実際のwebサイトから学ぶwebデザイン構造7つの共通点（模写学習 #4）
こちらにまとめております。
近接、整列、反復、強調どれも意識しましたが、近接と整列は特に意識しました。 作成していて思ったのは、「強調」を行うには、想像以上に思い切りが大切だということです。また、今までフォントの大きさやラインなどで、強調や反復を行ってきたことはありましたが、フォントの種類やスタイル（イタリック体など）を意識したのは初めてで、確かに良いなと感じる点が多かったです。
まとめ
10月は実在サイトを模写したり、デザイン本を読んだりとCSSの勉強が多かった月でした。そろそろバックエンド勉強再開しないとやばいなってなってます。今後は一旦デザインを終了し、スクレイピングを少し練習しようと思ってます。
以上ありがとうございました。