miraini.heyimyuriko.com Astro ↓
Designed by
Coded by
Narita Yuriko
Purpose
同スクール出身の佐藤けんたさんの作品をコーディングさせていただきました。現在はトップページのみのコーディングで、将来的にそれ以降のページも実装していく予定です。提供いただいたFigmaのデザインカンプをもとに静的サイトのコーディングを行い、スタイリングはTailwindCSS、スライダー対応が必要な箇所はライブラリSwiperで実装しました。
key points
- 管理がし易いように、更新が必要な箇所はAstroのコンテントコレクションで動的に実装しました。表示させるコンテンツはMarkdownやJSONで対応しました。
- TailwindCSSでスタイリングを行ったことで、ユーティリティファーストな設計となり、クラス名を考える必要がなくなったことで、以前から悩むことの多かった命名を考える時間が減り、作業効率が上がりました。
improvement
- ヒーローセクションのアニメーション調整で苦労しました。当初は、将来的にテキストや写真が差し替えになることを考え、それぞれを独立した要素としてコーディングしていましたが、全体の高さを維持する調整に苦労した結果、最終的にはテキストが含まれた画像で対応することにしました。また、アニメーションの切り替えタイミングや、開始から終了までの動きが不自然にならないよう、細かなタイミング調整に苦労しました。
- 初めてライブラリ（Swiper）を使用してスライダーを実装しました。独自のHTML構造に沿ってスタイリングを行う必要があり、一部の箇所ではデザインカンプ通りの再現が難しく、実装側でデザインの意図を損なわない範囲で調整を行いました。この経験を通して、ライブラリの構造や制約を理解した上で、それらがデザインの再現性に影響しないかを検討することの大切さを学びました。
year
2025
heyimyuriko.com Astro ↓
Designed by
Coded by
Narita Yuriko
Purpose
自身の転職活動に向けたポートフォリオサイトを制作。デザイン設計からデプロイまで一貫したフローに取り組みながら学ぶことが目的です。
key points
- サイトのデザインは知り合いのエンジニアの方に協力してもらい、必要な要素のみを配置したシンプルなサイトになるよう意識しました。シンプルな設計を意識したことで、ユーザーが操作に迷いにくいサイト作りを意識し、開発側としては今後も拡張し易い設計になるよう意識しました。
- 学習の一環としてフレームワークAstroを利用しました。Astroがコンポーネント指向の設計であるため、自然と再利用しやすいコード設計が可能で、全体的にファイル管理がし易かったおかげでスムーズに作業が進められました。
- アニメーションの特徴として、シンプルなデザインを引き立てたいという理由から、あえてカクカクした感じを残しています。
- JSONでコンテンツのデータ管理を行い、それらを動的に表示させています。今後、コンテンツが増えた場合も、ファイル管理がしやすくするのが目的です。
- ユーザーのシステム環境によって、ライトモード、ダークモードの表示が自動で切り替わるように設計しました。ユーザーの環境に合わせて表示させることで、表示の違和感をなくし、ページの巡回に集中してもらえるように配慮しました。
improvement
- 今回初めてデザイン設計からサイト制作に取り組む中で、特にレスポンシブ対応を意識した設計の難しさを実感し、何度か大幅な修正を行なったことで、当初のスケジュールを超えてしまうことがありました。この経験を通して、計画性の重要性や全体を俯瞰して作業を進める力の必要性を強く感じました。単にコーディングを行うだけでなく、一連の流れを経験したことで、これまで見えていなかった視点や気づきを得ることができ、今後は、こういった個人制作での学びを活かしながら、チーム制作における視点や学びを得ながら、より多角的な視点で制作スキルを磨いていきたいと考えています。
year
2025
hamburger.heyimyuriko.com WordPress (PHP) ↓
Designed by
Coded by
Narita Yuriko
Purpose
オンラインスクールRaiseTechの最終課題として、オリジナルテーマのWordPress化。Figmaのデザインカンプをもとに静的サイトのコーディング〜WordPress化〜デプロイまでを行いました。
key points
- 各ページで共通して使用されるヘッダー、フッター、サイドバーは、それぞれ別ファイルで管理し、jQueryを用いて各ページの指定箇所に読み込ませるようにしました。その結果、修正や更新の際に、記述の重複やミスを減らすことができ、作業の効率化だけでなく、メンテナンスのし易い設計を意識しました。
- 今回の制作ではチームでの開発が前提としていたため、FLOCSS設計を用いてコーディングをしました。管理のしやすさ、再利用性を意識しながら、チーム内で共有しやすいネーミングを意識した設計を心がけています。
improvement
- FLOCSS設計を用いたコーディングでは、自身のFLOCSSの理解の不十分だったことに加えて、コンポーネント化の定義が曖昧だったため、FLOCSSの持つ利点を十分に発揮させることができませんでした。特に、ProjectとComponentの切り分けやコンポーネント化する際の粒度の判断に悩む場面が多く、結果として、パーツをコンポーネント化することで得られるメリットを活かしきれなかったと感じています。
- レスポンシブコーディングに関して、自身の技術力が不十分であると痛感しました。その結果、全体の記述量も多く、コードも煩雑になってしまいました。この経験を通して、改めてレスポンシブ対応における技術力を見直すきっかけとなり、今後の成長に繋げていきたいと思います。
- WordPress化にあたって、お客様自身がサイトを運用していくことを前提に、どのような場面で、どのように更新をされるかを想定しながら、どこをPHP化するのかを考えていくことに難しさを感じました。
year
2024