制作実績

はじめての現場体験と試行錯誤

「カップルデトックスカウンセラー養成講座」のホームページ制作は、私にとって初めてのホームページ案件でした。お客様に直接お会いして打ち合わせを行うのも初めてで、現場の空気感やお客様の表情を感じながらヒアリングする緊張と新鮮さは、これまでにない経験でした。紙面やオンラインだけでは得られないイメージが、実際にお客様の声や雰囲気に触れることで一気に広がりました。
資格取得後の"輝かしい未来"を表現したいという漠然としたイメージはあったものの、具体的な方向性は固まっていません。特にファーストビューでは、お客様の「キラキラした感じにしたい」というご要望をどう具体的なビジュアルに落とし込むかで何度も案を作っては見直すという試行錯誤が続きました。
当初は極端にキラキラ感の強い素材を選んでしまい、「華やか」よりも「派手」に寄ってしまうなど、正直、何が正解なのか分からなくなり、行き詰まった時期もありました。そんな中、ディレクターさんが間に入り、お客様から参考デザインや希望するモデル画像などをヒアリングし、方向性を整理して共有してくださいました。そのおかげで、自分の中でも具体的なデザインイメージが固まり、方向性が決まってからは一気に形にできるようになりました。各要素が自然にまとまり、全体像が一気に見えてきたのです。

デザインの工夫と技術的な学び

デザインレビューを重ねる中で、デザインレビューをしてくれたデザイナーさんから多くのアドバイスをいただきました。また、同じお客様のオフィシャルサイトを制作していたデザイナーさんにも相談できるありがたい環境で、様々な視点からの意見を聞くことができました。
完成したデザインでは、女性らしさと高級感を兼ね備えたピンクとゴールドを基調に、笑顔あふれる夫婦や生き生きとした女性の写真を配置。同じお客様のオフィシャルサイトで使われていた線画のお花のあしらいを参考にポイントで配置し、統一感を持たせています。
ただキラキラを置くだけでは安っぽく見えてしまうため、素材選びにもこだわりました。上品さを損なわない絶妙な輝きの素材を選定し、彩度や透明度を調整。グラデーションを重ねて色の深みを出し、単調にならないよう微妙な動きや変化をつける工夫も取り入れました。背景にはごくわずかな動きを加えることで、静止画では得られない奥行きとリズムを演出しています。こうした細部の見せ方や配色の工夫は、デザインレビューをしてくれたデザイナーさんからいただいたアドバイスが大きく、学びながら形にできた部分です。
また、自分の制作意図をお客様やチームに改めて説明する場面もありました。自分の中で考えていたことを言葉にして伝えるのは初めてで、とても緊張しましたが、説明することで改めて自分のデザインの意味や狙いを整理できる良い機会になりました。
コーディング面でも多くを学びました。これまで考慮してこなかったレスポンシブ対応の考え方についても、この案件を通して理解が深まりました。私自身がホームページデザインにまだ慣れておらず、コーディングを想定した作り方や引き継ぎの仕方も分からない状態でしたが、コーダーさんが私の難しいデザインに合わせてブレイクポイントを細かく設定し、画面幅に応じて最適な見え方になるよう柔軟に調整してくださいました。この案件を通して、コーディングを意識したデザインの必要性を学ぶことができました。

この経験から得たもの

お客様からOKをいただけた瞬間は、大きな安堵と達成感を感じたことを覚えています。そして、無事にホームページが公開されたタイミングで、お客様が出版された書籍をプレゼントしてくださいました。その本には、このホームページのURLがしっかりと掲載されていて、自分が携わったデザインがこうして形となり、多くの人の目に触れる場に載っていることにとても感慨深さを覚えました。
今でもその本は大切に保管しており、この案件は私にとって特別な思い入れのあるサイトです。
この案件は、初めてのホームページ制作でありながら、チームで動くことの力強さと役割分担の大切さを実感できた経験でした。最初は形にならなかったデザインも、ディレクターさんや先輩デザイナーさん、お客様とのやり取りを通じて方向性が定まり、完成へと進むことができました。
困難な状況を仲間と一緒に乗り越えた経験は、自分の大きな自信になっています。これからも、お客様の想いを大切に、チームワークを活かした制作に取り組んでいきたいと思います。

チームへの感謝

制作を振り返ると、コーダーさんをはじめ、関わってくださったすべての方の支えがあったからこそ最後までやり遂げられたと感じています。
コーダーさんには、私の難しいデザインに合わせて細かくブレイクポイントを設定し、画面幅に応じて最適な見え方になるよう柔軟に調整していただき、本当に助けられました。さらに、「ナビゲーションメニューにはシャドウを付けた方がわかりやすい」など、コーダーさん目線でこうした方が良いという具体的なアドバイスも色々提案してくださって、デザインをより良くすることができました。
私自身が不慣れで修正依頼なども上手にできない部分があり、反省していますが、丁寧に対応してくださり本当に助かりました。また、コーディング後の公開間近で講座名が変わった際も、迅速に調整していただき、とても感謝しています。デザインを再現するための工夫や引き継ぎ時のポイントまで丁寧に教えてくださり、コーダーさんへの指示方法についても学ぶことができました。
ディレクターさんには、進行管理だけでなく、制作初期の迷いが多かった段階で方向性を整理していただき、制作に集中できる環境を整えていただきました。デザインレビューをしてくださったデザイナーさんには、視点を変えるヒントや具体的な改善ポイントを教えていただき、完成度を高めることができました。
皆様のサポートのおかげで、この貴重な経験を積むことができました。心から感謝しています。

独立後初！念願の実案件

私にとって、この襷ウェブでの初案件は、独立後初めていただいたお仕事でした。
それまでは別業界で仕事をしておりましたが、会社の倒産を機に一念発起でWebの世界へと飛び込み、約1年半ほど独学と約半年ほどアルバイトでホームページ制作を学んだだけの、経験が浅く実力も乏しい状態での独立だったため、お仕事をいただけること自体に非常に苦労しました。
そんな時に襷ウェブの存在を知り、藁にもすがる思いで応募した結果、この案件を任せていただくことになりました。

学習教材では学べない実案件での学び

初めての実案件で、本や学習サイトなどの学習教材では学べなかったことをたくさん学びました。その中でも特に大きな学びとなったのが以下の2つです。

1.コーディングは、デザイン（CSS）ではなく文章（HTML）を基準に書くこと
2.ホームページの規模に応じて、柔軟にコーディングルールを決めること

コーディングは、デザイン（CSS）ではなく文章（HTML）を基準に書くこと

まず、一番衝撃だったのが文章構造を大事にしてコーディングすることでした。私が今までに参考にしてきた学習教材では文章構造に関する記述はとても少なく、「どのようにデザインを再現するか」という視点ばかりだったため、私の中でもそれが当たり前だと勘違いし、デザインを再現することを優先した文章構造になっていました。
襷ウェブのメンターをしているのコーダーさんにフィードバックをいただく機会があり、そのデータを見ていただいた際に「人も機会も上から下へ読み進めるから、文章を大事にしないとSEO的にも良くない」とご指摘いただいたことがとても衝撃的でした。そもそも私がコーディングを学び始めた理由が、SEOなどマーケティングの面で成果の出せるホームページを作れるようになるためだったので、このアドバイスは非常に感銘を受け、コーディングに対する姿勢が180度変わりました。

ホームページの規模に応じて、柔軟にコーディングルールを決めること

次に学んだことは、ホームページの規模に応じて、柔軟にコーディングルールを決めることでした。その中でも特にCSS設計については学習教材でも意見がバラバラで、どのようなルールでコーディングをすべきかの最適解が見つかっていない状態でした。なので、ひとまず最新のルールだとされていたものを採用し、見よう見まねでコーディングしました。
その結果、メンターのコーダーさんに「これは大規模サイト用のルールだから、今回のケースには最適ではない」とご指摘いただきました。大規模サイト用のルールだったため、CSSが無駄に煩雑になり、ファイルデータが重くなっていたのでサイトの表示スピードにも影響が出てしまい、これが原因で離脱率につながるとアドバイスをいただきました。コーディングルールにおいて一番重要なのは分かりやすくすることで、それはホームページの規模によって分かりやすさの意味が異なることを学びました。

苦戦したことや反省からの気付き

コーディングをする上で特に苦戦したことや、プロジェクト進行における反省から気付いたことが2つあります。

1.レスポンシブ対応にて、デザインをキレイに見せるためならブレイクポイントを増やしてもいいこと
2.オンライン会議や動画など、テキスト以外にも最適な手段を選んでコミュニケーションを取ること

レスポンシブ対応にて、デザインをキレイに見せるためならブレイクポイントを増やしてもいいこと

コーディングをする上で苦戦したのが、どんな画面サイズで見てもデザインが崩れずキレイに見えるように調整すること（＝レスポンシブ対応）でした。その中でも特に大変だったのが、Topページのメインビジュアルの実装でした。デザインを再現するだけであれば簡単なのですが、画面幅が小さくなるとテキストがはみ出してしまったり、表示が崩れてしまったりが多々発生してしまいました。デザイナーさんと相談しながらレイアウトを微調整して、当初ブレイクポイントが3つの想定だったのが、最終的に7つに増えていました。
この件についてメンターのコーダーさんに相談した際、「微調整はよくあることだから、今後も必要な場合はブレイクポイントはいくらでも増やしていい」とアドバイスいただきました。なので、今後も画面幅によってデザインが崩れそうな場合は、躊躇せずブレイクポイントを増やして微調整しようと思います。

オンライン会議や動画など、テキスト以外にも最適な手段を選んでコミュニケーションを取ること

今回特に反省点だったのが、デザイナーさんとのコミュニケーションをほぼテキストのみで行なったことです。フィードバックやレイアウト調整など、デザイナーさんと連絡を取ることが多かったのですが、その点でとても時間を取らせてしまい、迷惑をかけてしまいました。また、私は文章を考えるのに時間がかかるタイプで、技術的なことを分かりやすく伝えようとした結果、1つの文章を送るためにいつの間にか1,2時間かかってしまっていたことがありました。
テキスト以外にもオンライン会議や動画を録画して送るという手段もあるので、この反省を活かして次回からオンライン会議を積極的に取り入れ、時間が合わなければ動画やテキストにして、円滑で柔軟なコミュニケーションが取れるように工夫したいと思います。

最後に

初めての実案件で無事に納品まで完了できたのは、ディレクターさんやデザイナーさんをはじめとする、たくさんの方々のサポートしてくださったおかげです。無謀な状態のまま独立し、路頭に迷っている時にチャンスをくださった襷ウェブには感謝してもしきれません。
学びや反省点を今後に活かすことが最大の恩返しだと考えているので、今回のことは忘れないためにもここに記して残したいと思います。