はじめに#

この度、初学者向けの Web 制作についてのメディアサイト「Feylo」を作成したので紹介します！
技術的には、Nuxt.js を使用して作成しました！技術的な部分はコードを見ていただければなので、この記事ではデザインに関して参考にしたサイトなどを紹介します。

feylo.dev

feylo.dev

リポジトリは下記で公開してます！

GitHub - nono-k/feylo

Contribute to nono-k/feylo development by creating an account on GitHub.

github.com

参考にしたサイト#

このメディアサイトを作成するにあたり、参考にしたサイトを紹介します。

全体的なデザイン#

JY-CONTENTS UNIQUE BLOG#

「創る」をおもいっきり楽しむ！| JY-CONTENTS UNIQUE BLOG

フリーランスwebクリエイターのblogです。デザインとプログラミングの勉強の事がメインですが、その他にも仕事等で気になった事や趣味の事についても発信していきたいと思います。

jy-contents.com

前から Web 製作についてのメディアサイトを作りたいと思っていたのですが、当初はブログサイトみたいな感じなのでアニメーションなどは付ける予定はありませんでした。

ですが、このサイトを見てブログサイトなのに、すごく目立っていて印象に残るサイトで良いなと思ったので自分が作ったサイトもアニメーションを駆使して初見で目立ち印象に作るサイトにしたいと思い作成しました。

文字の無限ループや、ホバーアニメーション、ハンバーガーメニュー、ブログ詳細のページ、ランダム記事など多くの部分で参考にさせていただきました。

dōzo#

dōzo – SNSで贈れるソーシャルギフト《どーぞ》

dōzoは、もらった人がギフトを選べる新世代ソーシャルギフトサービス。100種類以上の個性的なテーマの中から、あの人にぴったりのギフトが見つかります。

dozo-gift.com

サイトの配色や、記事一覧のカードコンポーネントのデザインとホバーアニメーションなどを参考にさせていただきました。

HugMug#

HugMug - 親子で楽しむファッションやライフスタイル情報を届けるママメディア

『HugMug（ハグマグ）』はWeb・雑誌で情報を発信する、ママ・パパに向けたライフスタイルマガジン。おしゃれな親子ファッション、子どもの行事の楽しみ方、話題のお出かけスポットなど、今どきファミリーがワクワクする情報をお届け。掲載数No.1の親子SNAP、人気ママ・パパのコラム、お出かけ先データベースなど、さまざまなコンテンツでファミリーの好奇心を満たします。

hugmug.jp

まんま一緒ですが、サイトトップのキービジュアルのデザインを参考にさせていただきました。自分のサイトではキービジュアルの右側に紹介したアニメーションの実装例を載せたのは独自性を出せて良かったです。

niko and …#

ニコアンド（niko and ... ）オフィシャルブランドサイト

ライフスタイルを編集するniko and ...のブランドサイト。ヒトや暮らしにスタイルを加えるヒントを発信していきます。

www.nikoand.jp

こちらも全体的なデザインを参考にさせていただきました。メディアサイトを作るうえで、デザインもアニメーションもポップな感じのサイトを作りたいと思っていたので、このサイトを参考にさせていただきました。

今後、コンテンツが増えた際もこのサイトのようなデザインにしたいと思います。

フェリシモ#

GO!PEACE! | フェリシモ

みんなで「うれしい未来」をつくるプロジェクト。お買い物を通じて、さまざまな分野のうれしい未来を一緒につくりませんか？

www.felissimo.co.jp

こちらのサイトは、フッターを主に参考にさせていただきました。
キーワードのタグが無限ループで流れるようにしたり、コンテンツ一覧の箇所を参考にして実装しました。

LIPPS#

LIPPS | 株式会社リップス

「カッコいい」を引き出すメンズビューティーブランド、LIPPS。ヘアサロンからトレンドを創り出し、ユーザーに必要とされるプロダクトを開発しています。

lipps.co.jp

こちらは去年、サイトを見て衝撃を受けたサイトの 1 つです。
見出しのデザインとお問い合わせエリアのスクロール連動のアニメーションを参考にさせていただきました。

コンポーネントまとめページ#

コンポーネントまとめページは、汎用的に Web 製作でよく使うコンポーネントをコピペですぐに使えるようにをコンセプトにまとめています。

デザインの参考は、Google の Material Design のサイトを参考にさせていただきました。前から Google の Material Design のサイトのデザインが好きだったので、参考に作成できて良かったです。

Material Web 同様に、作成したサイトもコンテンツ部分のみスクロールするようにしています。

Material Web

material-web.dev

Material Design

Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.

m3.material.io

Web デザインアニメーション帳ページ#

このサイトのメインコンテンツにしたいページです。
主なコンセプトは、今は閲覧できない「動く Web デザインアイディア帳」みたいに、Web デザインで使うアニメーションをまとめたいと思います。

「動く Web デザインアイディア帳」は jQuery が使われていましたが、このサイトでは素の JavaScript や CSS、GSAP など実務で実際に使う技術で紹介したいと思っています。

デザインに関しては、似たような感じになってしまっているので、後々にはもう少しデザインを変えたいと思っています。

動くWebデザインアイデア帳

ugokuweb.coco-factory.jp

おわりに#

初学者向けの Web 制作についてのメディアサイト「Feylo」を作成して公開しましたので、参考にしたサイトなどを紹介しました。

まだコンテンツは少ないですが、コンテンツを増やしていき、みなさんの役に立てるようなサイトにしていきたいと思います！