サンプルサイト制作時はノートに手書きで下書きを行い、次に必要であればロゴ等の素材を制作。そのまま直でコーディングを行いました。
この時点で下書き → ワイヤーフレーム → デザインカンプといった一般的な流れが頭になかった為、とりあえず手を動かすという発想で行動しています。
３作目もベースは手書きのノートのみで制作を行っています。２作目の反省が生かされず、画像データの加工や具体的なテキストの内容決定がコーディングと同時並行の為、スムーズさに欠ける作業だったと思います。
またこのあたりから「やりながら考えればいいや」と思い始めています。
当ポートフォリオサイトの制作にあたっては今後の実務面も考慮し、Figmaでデザインカンプを作成 → コーディングを開始という流れで作業を行いました。
事前にここまで固めているとコーディングに入ってからのスピードが段違いで、ほとんど手を止めることなく制作が進みました。
一部を画像データ化して使用する等、効率的な作業も出来たと思います。
またイメージや方向性のすり合わせの観点からも、事前に完成イメージがある重要性は高いと感じました。
現時点ではFigmaしか使用していませんが、必要に応じてその他のソフトウェアの取り扱いも学習しようと思います。
サイトについて
サンプルサイトの1つには必ず縦書きレイアウトのサイトを用意しようと考えており、第3弾として制作した架空サイトです。
縦書き ＝ 和風 ＝ 歴史っぽいもの。
江戸時代から明治にかけて、「口入屋」という仕事の斡旋所が存在しました。 これは現代でいうならハローワークやその他の仕事マッチング企業のようなもの。
もしこの時代にウェブサイトが存在したら、間違いなくお仕事マッチングサイトとして運用しただろうなという妄想から着想を得て制作したサイトです。
アピールポイント
縦書きレイアウトの状態で視認性を良く保ち、かつレスポンシブ対応が成立する事を最優先事項として制作しました。
この時点で出来る限りの事はしたと自負しています。
こういったサイトでよく見られる「明瞭な登録フロー図」、「お客様の声欄」、「案件紹介欄」をそれっぽく表現する事を意識しました。
反省点
縦書き和風レイアウトありきで制作を開始したため、我ながら設定が散らかっており分かりにくい部分があるかと思います。
もう少し実在するウェブサイトが想像できるようなサンプルサイトを制作するべきかなと反省しました。
その他
その他のアピールポイント等はサイト内のご質問コーナーに記載しています。ご覧いただければ幸いです。
上記コーナーに詳細は記載していますが、素材としてパブリックドメインの画像を使用させて頂いております。
お仕事マッチング × 歴史 で制作した縦書きレイアウトの架空サイトです。
デザイン、ロゴ作成：0.5人日、
コーディング：3人日
(レスポンシブ対応)