MANIARUのトップページを実際に作る

2026年9月22日

PROJECTS

PROJECT 001 — MANIARUを作る。
STEP 07 / HOMEPAGE

設計をWordPressの画面にする

STEP 02でブランドの雰囲気を決め、STEP 03でトップページの役割と順番を考えました。STEP 06までに制作環境も整ったので、今回はその設計を実際の画面にしました。

構成はHeader → Hero → Categories → PICK UP → PROJECTS → ABOUT MANIARU → Footerです。新着記事を並べるだけではなく、初めて来た人が「何を試しているサイトか」と「どこから読めるか」を知るための順番にしました。

HeroにはEXPERIMENT / LEARN / DOCUMENTと、「試したことを、誰かのマニュアルに。」を置きました。MANIARUの目的を、最初の画面で伝えるためです。

その下に「テクノロジーと仕組みを、実際に試す。」「AI・Web・コード・自動化。成功も失敗も、次の一歩に役立つ記録へ。」と続けました。何を扱い、どんな姿勢で記録するかを短く補っています。

入口は「最初のプロジェクトを見る」と「MANIARUについて」の二つ。まず制作の記録を読むか、サイトの考え方を知るかを選べるようにしました。

次に、AI / WEB / CODE / BUILD / MONEY / PROJECTSを置きました。テーマから記事を探したい人が、興味のある場所へ進めるようにするためです。

テーマの数を増やすことが目的ではありません。AIを試す、Webを育てる、コードを書く、仕組みを作る、お金の仕組みを学ぶ。それぞれ入口は違っても、実際に試して記録するという軸でつながっています。

PICK UPは、今読んでほしい内容への入口です。現在は、このサイトそのものを作るPROJECT 001を紹介しています。

その下のPROJECTSでは、一つの挑戦を連続して追えることを伝えます。通常の記事だけでは見えにくい、着想から制作までの過程を残す場所です。最初のプロジェクトをMANIARU自身にしたのも、サイトのコンセプトを制作から実践したかったからです。

最後のABOUTでは、「MANIARUは、マニアルが運営するテクノロジーと仕組みの実験・記録サイトです。」と伝えました。

長いプロフィールを先に読んでもらうより、誰が何のために運営しているかが分かることを優先しました。詳しい説明を増やさなくても、記事の入り口になる役割を果たせます。

制作にはArkhe無料版とSnow Monkey Blocks無料版を使い、必要なところだけCSSで補う構成にしました。白を基調に、濃紺や黒で文字を見せ、ブルーをアクセントにしています。

余白を広めに取り、静かで読みやすい画面を目指しました。派手な装飾や過度な煽りよりも、記事とプロジェクトを落ち着いて選べることを大切にしています。

PCの広い画面だけでなく、スマートフォンでも文章や各入口が追いやすいことを意識しました。情報を詰め込まず、段落とセクションの役割が分かる形にします。

ブランドで決めた言葉と配色、サイト構成で決めた順番が、WordPressのトップページになりました。これを完成形として固定するのではなく、記事が増えた後も使いながら見直していきます。

次のSTEP 08では、訪れた人から連絡を受けるためのお問い合わせと、サイトの運営に関わるプライバシーポリシーを整えた過程を書きます。