4月1日からスタートしたプロジェクトが今週、無事に納品を迎え、すべての作業が完了しました！

私の本業であるクライアントワーク（制作会社としての仕事）では、ただデザインを形にするだけでなく、まずは制作に必要な原稿を作るための「企画」からスタートします。その企画をベースに、文字原稿や写真素材などを丁寧にまとめていくのが最初のステップです。

準備が整ったら、いよいよデザインへ。案件の規模や特性に合わせて、IllustratorやFigmaを使い分け、スマホ・タブレット・デスクトップの3つのレイアウトを仕上げていきます。クライアントへの確認を経て、いよいよ「コーディング（実装）」へと進みます。

今日は、その数ある工程の中から、私が普段行っている「コーディングから公開・納品にいたるまでのリアルな流れ」を、少しだけお話ししますね。

実は、Webサイトを1つ公開するまでには、これだけの細かなステップを踏んでいます。

＜コーディングから公開までの11ステップ＞

STEP 1｜HTML / CSSの初期設定
すべての土台となる設計図を作ります。
◯Root Settings（全体の基本設定）
◯Base Styles（文字の大きさや全体のベースとなるルール）
◯Common Components（ボタンなど、共通で使うパーツの共通化）
◯Layout（大枠の配置決め）

STEP 2｜共通パーツ（ヘッダー・フッター）の作成
メニュー周りやフッターを作り込み、正しく動くか検証します。

STEP 3｜トップページの各セクション作成
ユーザーが最初に目にするメインページを、上から順番に組み立てていきます。
◯Concept（コンセプト）
◯Business（事業内容）
◯Recruit（採用情報）
◯Company（会社概要）
◯Contact（お問い合わせ）
トップページ全体の表示・動作検証

STEP 4｜下層ページの共通ヘッダー作成
各ページの上部に表示されるヘッダーの作成と検証。

STEP 5｜各ページのコンテンツ作成＆検証
トップページ以外の、各部屋（ページ）の中身を仕上げていきます。
◯Business（事業内容ページ）
◯Recruit（採用情報ページ）
◯Company（会社概要ページ）
◯Contact（お問い合わせページ）
各ページのレイアウトやリンクが崩れていないか、徹底的に検証します。

STEP 6｜システムの導入
問い合わせフォームや動的システムを組み込み、正常に動作するかテスト。

STEP 7｜アニメーション（動き）の導入
サイトに心地よい動き（フェードインやスクロール演出など）をプラスします。

STEP 8｜サイトのアイコン設定
◯favicon（ブラウザのタブに表示される小さなアイコン）の作成
◯OGP（SNSでシェアされたときに表示される画像や説明文）の設定

STEP 9｜公開の準備（裏方の重要作業！）
◯コードの整理（HTML, CSS, JavaScriptをきれいにお掃除）
◯ローカル環境での最終検証
◯ドメイン・サーバーの取得
◯Webサーバーへデータをアップロード
◯常時SSL化（https対応）
◯システム初期設定
◯リダイレクト設定（.htaccessによる転送処理）
◯Sitemapの登録 / Googleサーチコンソール登録 / Googleアナリティクス登録（検索エンジンや分析ツールの紐付け）

STEP 10｜全ページ検証
実際のネット環境で、スマホやPCからすべてのページをもう一度チェック。

STEP 11｜ついに公開！

頑張った後のご褒美は、こだわり抜かれた「極上の一杯」
長らく続いた室内での作業からようやく解放されました……！

ということで、頑張った自分への最高のご褒美を求めて、ぶらりと少し遠出をしてラーメンを食べに行ってきました。

今回のお目当ては、テレビ番組「ラーメンを食べる。」で紹介されていて、ずっと気になっていた東京・船堀にある「大島」さん。

実は私、普段はあまり自分から味噌ラーメンを選ばないのですが、番組内で店主さんが語っていた「一杯にかける並々ならぬこだわり」を聞いてから、「これは一度、絶対に食べてみたい！」と心に決めていたのです。

たくさん歩いたので帰る頃には足がパンパンでしたが（笑）、良いリフレッシュと運動になりました。

しっかりエネルギーもチャージできたので、また次のプロジェクトも、そしてスクールの生徒さんたちとのレッスンも、全力で楽しんでいきたいと思います！

それでは、また。