「ネル マガジン」始動から8カ月、WEB開設から2ヵ月が経過。今回は、初めてのWEB制作から開設までを振り返ってみようと思います。

「NERU」が一番初めに集まったのは2022年5月。そこから2ヵ月間自分たちが何をしたくてどこを目指すのか考えた結果、2022年7月に「ネル マガジン」の方向性が決まり、2022年8月から実際に動き出しました。同時にインスタグラム運用や紙媒体も動いていますが、今回はWEBだけにフォーカスを当ててお話します。

はじめに

まずは、NERUメンバーで話し合い、サイトのトンマナや方向性を決定。決めたことをベースに”晴れ女”が、ワイヤーとデザイン作成を進めます。

トンマナとは ⇒ トンマナとは？意味・サイト事例・ルール設定方法を解説！

その裏で丸井は、どこのサーバーを借りるのか、独自ドメインを取得するか、運用方法、アナリティクス、SEO対策...など細かい部分を調べ、実際に契約やドメインの取得、調べたことを反映させながらベースとなるファイル構成・デモ環境の作成・内部的なコーディングなど細かい作業を進めていきます。

＜サーバー契約＞

レンタルサーバーはロリポップさんのベーシックタイプを契約。
※詳しくはロリポップ公式サイトを確認してください。

今回のWEB開設は「まずやってみよう！開設、運用してみよう！」ということが目標だった為、サーバー契約から設定までが分かりやすくコストはかけずにリスクを避けられるロリポップさんで契約しました。月額料金が安いプランを利用すれば、万が一、成果に繋がらなくとも、ダメージが少なくて済みます。表示速度の遅さに関しては安さで納得していますし、初めてWEB開設するにはピッタリです。とりあえずは、運用に慣れてサイト容量が大きくなった時にサーバー契約を見直したらいいかなと思ってます。

独自ドメイン取得

独自ドメインとは、世界に1つしかないオリジナルのドメインのことです。ロリポップの場合サーバーを契約するとロリポップの共有ドメインを無料でもらえますが、「ネル マガジン」をしっかりとブランディングし、本格的にブログ運営がしたかったので独自ドメインを取得しました。本来独自ドメインを取得する場合サーバー料金とは別にお金がかかるのですが、ロリポップは適用条件を満たすことで、独自ドメインをずっと無料で使わせてくれます。
ドメインずっと無料 ⇒ https://lolipop.jp/info/news/6711/

アナリティクス／SEO対策調べ

Googleアナリティクスはコードを埋め込む必要があるので、NERUのGoogleアカウントを作成してアナリティクス用のコードを発行・取得したあとに、HTMLに埋め込みました。他には、HTML内にmeta（メタ）タグを入れ込んだり、できるだけ…正しいタグを使用するようには意識しています。

私がこのような細々とした作業をしている間に、“晴れ女”が作成しているワイヤーフレームやサイトデザインのラフが上がってきます。

当時のスケジュール想定はこんな感じです。開設…3ヵ月後ろに倒れてますね～～…

★2022年9月時点のコーディングスケジュール想定

• 10月

  【晴】大まかなTOPデザイン作成

  【丸】サーバー契約設定・サンプル作成

• 11月

  【晴】トップの細部と下層ページの大まかなデザイン

  【丸】ガイド・基盤・TOPコーディング

• 12月

  【晴】下層ページの細部デザイン

  【丸】下層ページコーディング

• 01月

  【丸】色々修正、調整デザインとコーディング

• 02月

  デモアップ、もしもスケジュールがまけば、2月web開設？

• 03月

  web開設

デザインに微調節は入りますが、10月～11月にTOPデザインが上がったので、がっつりコーディング作業が始まります。

コーディング作業

まずは、細かい設定からです。「ネル マガジン」はスマホファーストの2カラム構成になっている為その土台をレスポンシブ対応で作成。デザインを元に、フォント、フォントサイズ設定…など細かいコーディングを終わらせ、そのベースを複製してTOPと下層ページを作りこんでいきました。

基本的に、作りたいコードやうまくいかない部分が出てきても、ネットをたたけば答えが出てきます。WEB制作、コードについては多くの人が情報を提供してくれてますし、グラフィックやデザイン制作みたいにセンスに大きく左右される事がありません。感覚さえ掴んじゃえば、いびつながらどうにかなる感じです。中を見ちゃうと汚いかとは思うんですが...初めてならこんなところかな…

トライ＆エラーでコーディング作業を進めながら、みんなにもお手伝いをお願いしました。

＜ファビコン・OGP画像＞

NERUのロゴを”カマクラ”が作ってくれたので、ロゴに関する「ファビコン画像作成」「OGP画像（サムネイル画像）」の作成をお願い。

＜インスタグラム連携＞

”ぺ”にはインスタグラムをサイトに連携したいため、そのために必要な登録作業やコード取得をお願いしていました。”たったかた～ん”がインスタグラムを統括してくれているので連携してもらいながら…

11月時点で改めてスケジュールと作業確認を行っています。

★2022年11月時点のコーディングスケジュール想定

• 11月

  【丸】TOPページの静的部分を作り終える

• 12月

  【晴】下層ページの細部デザイン

  【丸】一覧ページ／記事ページの静的部分を作り終える／細部修正

• 01月

  【丸】インスタグラム表示や関連記事表示…などの着手／細部修正

• 02月

  【丸】ファイルの整理、各位にアップ方法・扱い方をレクチャー

• 03月

  【全】記事投稿【丸】本番化／web開設

結局…サイトの全体的なコーディング作業が終わったのはなんと…2023年3月…凄く後ろに倒れました。その後 ”晴れ女”にWEB全体のデザインチェックをしてもらって修正作業を何度か繰り返します。

コーディングレクチャー

また、各自メンバーの記事を長期的に私が作り続けるのは今後を考えると厳しい事と、全員HTMLを触れるようになった方が良いので、運用（コーデイング用）の資料を作成後、レクチャー会議を実施し全員自分の記事は自分で作成できるようにまでなってもらいました。NERUは成長することを目的とした団体なので脳を練って練って練りまくってもらいました（笑）

個人的な感想なのですが、複数人がファイルを触るので、どのようなファイル構成にするかとかコードの書き方をどうすれば分かりやすくなるかなど、みんなが触る部分をどうまとめるべきか考えるのが結構難しかったです。自分1人でやってる場合の自分がわかればなんでも良いってのとはまた違うので…

公開作業

公開作業といっても今までデモ環境で作成していたデータを本番環境に移動するだけです。お仕事でやってるわけではないのでここの緊張感がまったくないです。ただ、環境が変わったことでレイアウトが崩れたりリンクが切れる恐れがあるため、公開後各自のデバイスで確認してもらい、問題がないことを確認して作業終了。無事公開完了となりました。

おわりに

ゼロからサイト作成をしてみて、全てが初めてでネットで調べながらやってみるしかない状況でした。その為、遅い段階でファイルの置き場所を変えたり、画像サイズを決めたり、先に決めるべきとこを後半で作業してしまったので効率が悪かったなとか、どうしても実装できないシステムがあったり…うまく組み込めず妥協した部分も多いです。私の技術が足りずデザインを100反映できてません。本当はHTMLだけじゃなくてWordpressとかCMSを組み込めばみんながもっと楽になるしできることも増えるはず…

など…色々心残があるので…今後サイト全体の課題や更新するべき部分が出るとは思いますが、まずは、どうにか公開までできたので一歩前進、一安心って感じですね。

NERUできているといいますか…。きっと自分1人では公開まで頑張れなかったと思います。ついつい自分に甘えてやらなかったりしてしまうので…NERUのみんなと協力したからこそ、自分だけの問題ではなく他の人が関わっているからこそ責任感が生まれて尻をたたき合っている…そんな状況と環境に感謝です。

まさに、「どれほどの作品を生み出せるのかを知り、より成長することを目標として、良いものを創るため考えを「練る」ことをやめず、挑戦し続ける。」ができた良いチャレンジでした！

Writer:丸井ロック
2023/08/06