半年ぶりに諸々更新、さっそく大きく動きました。やりたいことが多くて迷っていた状態から、「サイトを整えて、テンションの上がる場所にする」と決めて、TOPページを作った記録です。
きっかけ：やりたいことが多すぎて動けなかった
止まっていた間、やりたいことがいくつも頭にありました。
- WordPressの勉強とサイトの整備
- JavaScriptやPythonの学び直し
- 自分専用のAIを作って遊ぶ
どれから手をつけていいか分からなかったので、AIアシスタントのClaudeに相談しました。その流れで、まず「自分専用AI」の入口として、チャット画面の土台（入力欄と、会話が表示されるだけのもの）を作りました。
方向転換：サイトを動かすことを優先した
チャット画面を作ったところで、「今はそっちじゃないな」と感じて、方向転換しました。
- AI作りは、いったん置いておく
- まずはWordPressのサイトを、テンションが上がる場所にする
- 最初の一歩は「TOPページ」にする
チャット画面で触ったHTML・CSS・JavaScriptの経験は残っているので、無駄にはならないと思っています。
やったこと
1. TOPページを「自分用の基地」にすると決めた
最初は「訪問者に見せるページ」を考えていましたが、人に見せることは今は考えていない、「自分だけの特別な場所」にすると決めました。そこで、開いたときに「わくわくする」ことを一番の目的にしました。
2. デザイン案を作った
色は、濃い紺の背景に、黄色・ピンク・水色を重ねた、ゲームっぽいポップな雰囲気にしました。内容は次の構成です。
- ヒーロー：「おかえり、Pacho!」と、いまのステージ
- 今日の一手：クエスト風のカード
- いまの自分：再開した日や、作った作品の数
- 作ったもの：これまでの作品へのリンク
- ショートカットと、最近の記事
3. WordPress（Cocoon）に反映した
作業は次の流れです。
- 固定ページ「TOP」と「ブログ」を作る
- 「設定 → 表示設定」でホームページを固定ページに切り替える（ここで少し迷いました）
- TOPページを広く使える設定にする
- 「追加CSS」にCSSを貼り、「カスタムHTML」ブロックにHTMLを貼る
2.でつまづいた。「設定→表示設定」これの該当が画面を見つけ出すことができなかった。左のメニューを最小化していたため、設定がどこにあるのかわからなかった。左側のメニュー画面を表示させることで該当箇所を発見した。
学んだこと
- 以前のCSSを消さず、新しいCSSを追加するだけで、TOPだけ見た目を変えられる（TOP専用の名前をつければ、他のページに影響しにくい）
- 作る前に「誰に見せるか」「どんな気持ちになりたいか」を決めておくと、デザインの方向が決まりやすい
- AIが最強。特にClaudeはコードを書いたりするのもとても優秀だと感じた。ただ無料プランだとすぐに制限が来てしまう印象。
- AIを活用したエンジニアリング。AIを作ってみたいと思った。
- AIが何でもできてしまうため、自分はこれから何を学べば良いのかがわからなくなる。
- 学びたいというモチベーションもあるので、複雑な気持ち。
- 参考書を買った方がいいのかな？と思ったりしている。
次回
TOPだけ雰囲気が違う状態なので、次は他のページも含めて、色やヘッダー画像をそろえていきます。TOPの「今日の一手」も、実際の内容に差し替えていく予定です。
コメント