公開して数日…ようやくセキュリティやブラウザの手続きなどが済んだので、まずはウェブサイトの制作過程を残しておこうと思います。書きたいことが多くなってしまったので、前編と後編にわけています。稚拙な文章ですが、温かい目で読んでいただけると幸いです。 前編では、制作背景・デザイン・コーディングについて書こうと思います！
制作背景
まずは、このサイトを作った制作背景を軽く書こうと思います。 私はジャンル問わず創ることが（たぶん）好きなのですが、途中で飽きて未完成のまま他の制作を始めてしまう愚かな人間です。そこで、制作したものを載せる場所を設けることで、一利用者でもある自分が供給に飢え、作らざるを得ない状態をつくることにしました。SNSで発信するという方法もありますが、既存のシステムで思考を開示することが恐ろしく、人があまり訪れない場所で生息したかったので、個人サイトを作ることにしました。 なお、個人サイト自体は4年前から憧れており、ずっと作りたいと考えていました。（※レンタルサーバーの手続きやその他諸々が面倒で考えるのを諦めていた背景があります。）
制作過程 -計画編-
このような背景のもと、勢いで始まったウェブ制作ですが、割と真面目に頑張ったので、制作過程について触れたいと思います。早速ですが、計画編を書きたいと思います。
私は完成を先送りにしてきた実績があるので、まずは計画を立ててゴールまでの過程を明確にするところから始めました。とはいえ、理想とするウェブサイトのイメージがなければ計画すら立てられないので、紙にサイトの構成とおおまかなデザインを描きました。
下の画像が初期案です。
ヘッダーは今とあまり変わりませんが、中央にPC、ノート、パスポートのイラストがあり、カーソルを当てるとアニメーションでキャラクターが動いたり、文字が浮き出たりする予定でした。（イラストを描くスキルと元気が足りず挫折）結局初期の理想が高すぎてデザインは後から真剣に考えるのですが、各ページの機能や配置はかなり初期のまま作っています。
さて、イメージができたところで計画を立てていきます…！私は知識が少ないので、ChatGPTに計画（制作過程）を考えてもらいました。ChatGPTが出してくれた制作過程は以下の通りです。
1.デザイン 2.インクルード化する部分（ヘッダー、フッター）のHTML, CSS 3.トップページのHTML,PHP,CSS 4.Javascript 5.他ページのHTML,CSS 6.他ページのPHP（CONTACTページなど） 7.全ページレスポンシブ対応 8.確認・修正
ちなみに、今回は作りながら新しいコードの書き方も学びたい！という無駄な向上心があったので、各過程に期限は設定していません。珍しく計画を立てた私は上機嫌で作業に取り掛かるのでした。
（なお、私は無鉄砲が売りなのでこの後に計画の無視、処理の変更を行いChatGPTを努力を水の泡にします。）
次ページはデザインについて書きます。
このページではデザインについて書きます。
制作過程 -デザイン編-
正直、デザインが一番苦労しました。 デザインを見るのが好きなはずなのにまともに勉強しない…。だからいつもこうなるんだ…。 しかし、完成したのでヨシ！過程を説明します。
デザイン作成に使用したツール：Figma 期間：6日ほど
①色選び
何日も迷走した結果、配色スキルが皆無とわかり、色選びから始めることにしました。ウェブサイトはベースカラー、メインカラー、アクセントカラーが基本と知り、３つの色を決めました。 メインカラーは私が好きな濃い青色、アクセントカラーは補色の濃い黄色、ベースカラーは薄い水色にしました。
②サイト名・どんなデザインにしたいか（なんとなく）
紆余曲折あって、ウェブサイトの名前は無仁帰にしようと決めました。 この名前は、「無に帰す：積み重ねてきた努力が、元の何もない状態に戻り、すべて無駄になること」という言葉から来ています。そして、この意味を少し改変して「幸せも苦しさも命尽きる頃には全て無になる」という意味合いを持たせています。この考えは私が他者より物事を深く捉えすぎて、過大に痛みを感じやすい性質であることを基に作りました。この名づけからウェブサイト名を無仁帰にするならば、私の精神を表す＋見ていて相手が不快に思わないデザインにしたいと考えました。（作ってる最中は感覚的に進めているので、文章は後づけです）
③Figmaで見た目完成！
さて、色とコンセプトが決まりましたが、私のデザイン力は低いまま。そこからどうやって見た目を工夫するかが重要でした。そこで、参考にしたのがボカロやゲームのMVです。デザイン力を向上させるためには良いデザインの模倣と聞いていたので、真似までは行きませんが、構成を参考にすることにしました。そして、MVの中で目に留まったもの（キャラクターがこちらを覗き込んでいる構図、端に小さく書かれた文字列、幾何学模様）を取り入れることにしました。
そして生まれたのが下にあるデザインです。 トップ画面はスクロールできないようにし、奥行きのある空間を覗いているような見た目にしました。この時点で、中央の波を何かしらの操作で動かしたいとは考えていましたが、背景の歪んだグリッド線や星はまだありませんでした。イラストを描く元気とやる気がなかったので、ボタンやロゴの画像はそのままサイト内で使っています。とにかく自分が素敵だと思ったらOK！のテンションで作っているので、見やすさなぞは考慮しませんでした。（利用者にキレられそうなスタンス）
そして、このデザインを参考に他ページ＋スマホのレスポンシブデザインを考え、下の画像のような構造ができあがったのでした。次ページでは、コーディングについて書きます。
このページではコーディングについて書きます。 ※ここに書いてあることは初心者の迷走なので、正しいとは限りません！真似しないでください！
制作過程 -コーディング編-
へへっ、お待ちかねのコーディングだぜ! 最近PHPを学んだことで、できることの幅が広がり、テンション高めの状態で始まりました。しかし、そんな興奮も束の間、1週間常にパソコンと向き合い、目バキになる日々が待っていたのでした。 コーディングの過程を全部書くと長すぎるので、覚えておきたい部分だけピックアップしています。
言語：HTML,CSS,JavaScript,json,markdown 教師：ChatGPT 期間：7日だった気がする（70時間ぐらい？）
①マウス・タッチ追従の背景
インクルード化、トップページのデザイン配置は、基本的な知識で乗り切れたので、自分だけは実装できなかった背景について書こうと思います。JavaScriptで動かしているのですが、私はまだ詳しくないので、ChatGPTに聞きながらコーディングしました。 黄色の波はJavaScriptを使って、sin,cosの計算を行いSVG形式で画面上に表示しています。マウス・指の移動に応じて角度や波の深さが変化し、波がついてくる仕掛けになっています。デザインの段階では波だけ動かす予定でしたが、背景が寂しく感じ、デザインにはなかった歪んだグリッド線と星を追加しました。（無計画の象徴） 当初グリッド線に関しては、HTMLでSVGを書き出し、マウスと指に追従して歪ませる予定でした。しかし、HTMLの時点で描画が重すぎたので、諦めて画像を縦横に移動させる仕組みに変えました。
②PHPとjson・markdown
サイト公開後も更新するWORK,BLOGページにて、円滑に更新を行うため、PHP,json,markdownでデータのやり取りを行っています。脳筋方式でやるならHTMLに直書きが一番わかりやすいですが、疲れる可能性が大きかったので、更新しやすいコードを作ることにしました。json,markdownを使うのは初めてでしたが、これがないと更新が手間！と感じたので、導入してよかったです。それぞれ以下の役割を担っています。
・json （WORKページでYouTubeリンク・クレジットを作品ごとに指定する。BLOGページでタイトルやジャンル、markdownのパス指定を行う。） ・markdown （BLOGページの長文を書くために使用。今まさにmarkdownに書いています。）
③レスポンシブデザイン
そもそも私のデザインがレスポンシブに向かない＋入れたい要素が多すぎるため、大幅に配置を変えました。それでも内容量が多いので、スマホの表示は汚いです。見るならPCで見てほしい…。 変更点は以下の通りです。
【変更点】 ・ヘッダーをハンバーガーメニューに変更 ・ボタンや画像の位置変更 ・テキストサイズ、字間、行間の調整 ・画像サイズ調整、min-width,min-heightの設定 ・タッチに背景・波・星の追従させる
ただ、本サイト公開後にiPadを使って気づいたのですが、iOS系はウェブページの最後に到達してもスクロールでき、サイト自体を縮小できるのですね…？そんな仕様を露知らず1画面で完結する想定で作っていたため、iOS系を使っている方には申し訳ない構造になりました…。Macで閲覧するとどうなるんだろう…。これをサイト内で無効にできるかわからないですが、今後対策を調べたいと思います（涙）。
そんなこんなで完成したウェブサイトですが、いくつか消した機能があります。それはページ遷移とEnglish翻訳のトグルボタンです。ページ遷移は、窓？の中で上からカーテンが下がり、カーテンが上がると選択したページに遷移するという仕掛けでした。また、English翻訳のボタンは事前に英訳文章を用意しておき、それを切り替える予定でした。しかし、よく考えたらページ遷移は邪魔だし、英訳も需要ないな…と気づき、最終的にはなくなりました。技術を使えるようになると嬉しくなって余計なものまで作りたくなっちゃうんですよね…。まあ、反省してま～す。
さて、サイトが完成！あとは、公開するだけ！…だと思っていたのに、ここからもまた大変でした。 サーバーとの格闘やreCAPTCHAなどを後編に書こうと思います。（読んでられないよ…）