CreativeDesignersOfficeK

制作事例

ホームページのテンプレート制作

  • オリジナル

参考URL:

https://cd-officek.com/works/basic/basic.html

更新内容 随時更新予定!

2021/05/19 初稿を投稿しました。

2021/05/20 レスポンシブ対応を行いました。

2021/05/21 アニメーションを追加しました。

2021/05/21 画像を変更・追加しました。

2021/05/24 アニメーションを追加しました。

2021/05/24 デザインを一部修正しました。

2021/05/24 画像を追加しました。

2021/05/25 CONTACTを追加しました。

デザインのこだわり

このテンプレート、Basicはシンプルな美しさをコンセプトに制作しました。

幅広いサイトで使いやすいようなデザインを心がけました。

線や丸、四角のような要素は、そのサイトによって用いたいものが違うと考え、

極力少なくするようにしました。

一方で、ホバーアニメーションなどで現れる線や矢印は少し太めにすることで、

堅実さが出るようにしました。

また、堅実さを出すという意味では、フォントや配色にも同様の狙いがあります。

フォントはLatoというゴシック体でもやや細めのものを選びました。

幅広く用いられるゴシック体かつアルファベットの見え方がスッキリしている、使いやすいフォントです。

配色は、どんなサイトにもなじみやすい無彩色の灰色と、清潔感や安定感、実直さを表す青を用いました。

それぞれの要素はシンプルながらも、多くのサイトで使いやすいように工夫を施しました。

アニメーション

どんなサイトであっても、サイトを見た人が一番上から一番下までしっかり見ていただけるようにする。

そのために、サイトを見ていて飽きさせない工夫として、アニメーションは比較的多めに設定しています。

スクロールアニメーション、ホバーアニメーションに関してはフェードイン、スライドインなど比較的定番のものを入れていますが、目玉はトップ画面の画像スライド、ニュースティッカー、そしてページ下部のNEWSのスライドです。

3種類と数多く入れることで、かなりページ全体に動きがあるように見えることかと思います。

もちろん、各種デバイスの画面幅に応じてぴったりのアニメーションにしています。

ぜひ、スライドはじっくり見ていただけると幸いです。

Back To Archive Back To Top