本文へ移動
blankBLANK / 01
すべての記事JOURNAL / 本文

個人サイト開発記録 01:アイデアから最初のプロトタイプまで

サイトづくり最初の試み。自分の場所を持ちたいと思った理由、最初のプロトタイプの姿、そしてこれからどう改善していきたいか。

これは初期プロトタイプの振り返りです。ここに書いているのはサイトの最初のプロトタイプ段階での考えと状態で、現在のサイトの姿とは異なる場合があります。

Hello, world.

このサイト最初のブログ記事として、サイトづくりを始めたときの最初の試みを記録しておきたいと思います。なぜ自分の場所を作りたいと思ったのか、最初のプロトタイプはどんなものだったのか、そしてこれからどう改善していきたいのか。

私はずっとプログラミングを学んでいて、ゲーム開発や AI、さまざまなオープンソースツールにも興味があります。学習ノートややってみたいプロジェクト、まとまらない考えを少しずつ整理していける、自分だけの場所が欲しいと思っていました。あとで振り返ったとき、当時の自分が何を調べていて、どうやって一歩ずつ進めていったのかがわかるように。

そうして、この個人サイトづくりが始まりました。

参考サイトからスタイルを決める

最初、私はサイトの雰囲気を「少し爽やかな二次元」と言い表しました。

アニメやゲームへの興味が伝わり、ページは少し軽やかで、落ち着いて記事を最後まで読めるものにしたい。配色も画像も文字も余白も、すべてその雰囲気のためにあるべきだと考えていました。

この方向性をはっきり伝えるために、参考サイトを探しました。具体的なページを見てから自分の好みを話すほうが、ずっと話しやすくなります。それでも「爽やか」や「二次元らしさ」はまだ漠然としていて、同じ言葉でもまったく違うデザインになりえます。

最初のプロトタイプは期待に届かなかった

最初のプロトタイプには、ホーム、作品、記事、コレクションといったエリアを配置し、テーマ切り替えや検索も入れてみました。けれど全体を見たとき、私の感想ははっきりしていました。これはまだ自分の求めているものではない、と。

内容のエリアはそろっていても、ページ全体の印象は期待からまだ離れていました。これも最初の記録に残しておきたい部分です。最初の試みは、まだ手直しが必要なプロトタイプから始まったのです。

次は「何か違う」という感覚を、もっと具体的な問題に分解していきたいと思います。まずホームで一番目立っているのは何か、自己紹介と記事への入口の位置は適切かを確かめ、そのうえで配色、フォント、画像の比率、情報量を考えます。

調整するときは範囲も絞るつもりです。まずホームを固め、次に記事ページ、その後スマートフォンでの読みやすさと操作を確認します。一度の修正で一つのはっきりした問題に取り組めば、効果も判断しやすくなります。

AI もプロトタイプと方針の整理に関わった

今回の試みでは、AI がプロトタイプと方針の整理に関わり、最初のアイデアを実際に見て話し合える形にしてくれました。

これから AI に開発を手伝ってもらうときは、要望をもっと具体的に伝えたいと思っています。たとえば、ホームで最初に何を見せたいのか、記事ページはどうすれば読みやすいのか、一回の修正で具体的にどの問題を解決したいのか。どれも、まず自分で考えてから、実際のページを見て判断する必要があります。

同時に、関係するコードも少しずつ読めるようになりたいと思っています。ある内容はどこで管理されているのか、スタイルはどこで決まっているのか、新しい記事を追加するにはどんな手順が必要なのか。このサイトを自分で保守し続けられるようになることも、このプロジェクトを通して身につけたいことの一つです。

これからここで書きたいこと

今のところ、ブログでは自分が続けて取り組むいくつかのテーマを書いていくつもりです。

  • プログラミングの学習:ある概念を理解するまでの過程、練習中にぶつかった問題、あとからわかったこと。
  • ゲーム開発と AI の試み:面白いアイデアを小さな実験にして、試した方法と結果を記録すること。
  • サイト開発の記録:ページ、機能、コンテンツ構成の調整と、それぞれの修正の理由。

ごく小さな問題だけを扱う記事もあるかもしれません。たとえば、ある条件分岐がなぜその結果になるのか、あるページの細部をなぜ直す必要があったのか。自分の言葉で説明できるなら、それは記録として残す価値があると思っています。

最初の一本から少しずつ積み重ねる

これからも、サイトの見た目と読み心地を磨きながら、自分の記事やプロジェクトで少しずつ中身を充実させていきたいと思います。

これからの開発記録では、そのときどんな問題に出会い、何を試し、実際にどうなったのかをはっきり書けたらと思っています。まだ解決していない部分も先に書き留めておいて、次の更新で続きに取り組めばいい。

この記事では、まずサイトづくりの出発点を記録しておきます。

もし通りがかったなら、ようこそ。これからここには、コードやゲーム、いろいろな試行錯誤、そして私が少しずつものづくりを覚えていく過程が並んでいくはずです。