TOP部分はサイトの顔である。

 

サイトの一番上のところを画面を占めることになるTOP部分は、サイトの顔ともいえる。

ユーザーは、サイトのTOPを見てそのサイトの雰囲気を把握することができるからだ。

 

 

 

  TOPの全体的なデザイン

 

 

 

私はシンプルさを求め、こうデザインした。

全体的な色を黒系にし、落ち着いて知性的な感じを与えようとした。

そして、サイトタイトルの下に北海道の写真を掲載しているサイトだと情報を伝えている。右の写真は、あまりにも余白が多く、面白くないと思ったので入れてみた。

 

最近のトレンドでは、テキストの横に写真を配置して余白を補うデザインが多いらしい。

 

 

  navデザイン

 

上の写真を見るとわかると思うが、navデザインも全体的な雰囲気に合わせて作っている。

 

 

navで特に気を使ったのはこの部分だ。

navを固定する方法はいくつかあるが、最近ではこの方法を使うことが多いらしい。

とりあえず、私はこの方法が一番楽だと感じた。コードの量も少なくて素敵。

JavaScriptを利用してアニメーションを入れてみてもいいと思ったが、シンプルさを維持するためにやめた。

 

このposition: sticky;については後ほどほかの掲示板で触れることにする。

 

 

 

  TOPデザインの感想

 

正直、デザインについての知識が浅く、立派なデザインはできていないことに自分は気づいていた。

それで、デザインのトレンドを知るためにYoutubeで多くの動画を見た。

余白、対比、フォントなど様々なデザイン要素を勉強できて嬉しかった。ここで得た知識は次のプロジェクトで生かすことにした。

まずは自分の実力が知りたいからだ。自分の実力を記録しておいて、後々の私と比較してみたい。

 

とにかく、この部分を作りながら、デザインだけだなく様々な分野について得られた知識も多く私個人的にはすごく満足している。stickyもその中の一つである。

すごく楽で様々な表現が出来そうなposition属性だ。皆さんもぜひ使ってみてほしい。