Munus

はじめに

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

https://feylo.dev

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

https://github.com/nono-k/feylo

参考にしたサイト

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

全体的なデザイン

JY-CONTENTS UNIQUE BLOG

https://jy-contents.com/

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

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

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

はじめに

このブログと技術ブログは、Astro の Content Collection を使ってマークダウンでブログを書いていて、記事は GitHub で管理してます。

Astro の Image コンポーネントを使うために、ブログ記事の画像も src/assets/images/配下に配置していました。しかし、ローカルで画像を管理したくないなと思ったので Cloudinary を導入してみました。

Astro での Cloudinary の導入方法について、この記事では紹介します。 Cloudinary の詳しいオプションなどは解説しないのと、Cloudinary のアカウントが既にあるのを前提に説明します。

まだの方は下記 URL からアカウントを作成してください。

https://cloudinary.com/

Astro Cloudinary のインストール

Astro で使える Cloudinary のコンポーネントが用意されてます。下記コマンドで Astro Cloudinary をインストールしましょう。

npm install astro-cloudinary

インストールできたら、プロジェクトのルートに.envファイルを作成して、Cloudinary のアカウント情報を記述します。

PUBLIC_CLOUDINARY_CLOUD_NAME="<Your Cloud Name>"

はじめに

Web 制作に関して書いている技術ブログの方で、1 年越しでアドセンスに合格したので、その経緯について書いていきます。

同じようにブログをやっていて、なかなかアドセンスに受からない…と悩んでいる方の参考になれば幸いです。

https://hypb.dev

始まり：技術ブログを始めた理由

未経験から Web 制作会社に転職してから半年が過ぎた頃、日々の学びや試行錯誤をアウトプットする場所が欲しくてブログを始めました。（あとは少しの収益が欲しかった笑）

技術系の内容がメインで、以下のような記事を書いていました。

• Astro についての情報
• GSAP や Swiper などのライブラリーを使ったアニメーション表現
• 自分の開発環境など

「どうせ書くなら収益化もできたら嬉しいな」と思い、ブログ開設から数記事でアドセンスに申し込んでみたのですが…

不合格の連続：何が悪いのか分からない

最初の審査結果は「不合格」。理由は「価値の低いコンテンツ」とのことでした。