視線誘導とリズムを生む「ジグザグレイアウト」の採用
「事業内容」や「選ばれる理由」のセクションにおいて、画像とテキストを左右交互に配置する構成を採用しました。 単調なリスト形式になるのを避け、視線を「左(画像)→右(文章)→左(文章)→右(画像)」と自然に誘導することで、心地よい「読むリズム」を創出しています。これにより、情報量が多くてもユーザーを飽きさせず、スムーズに内容を理解してもらえるよう意図して設計しました。
クライアント
トランスポート・ジャパン株式会社
制作時期
2025年5月
制作期間
ワイヤーフレーム/約1週間
デザインカンプ/約2週間
実装/約3週間
制作目的
サービス内容をわかりやすく伝え、BtoBの新規顧客獲得
ターゲット
既存の物流に課題がある or 新たな配送手段を検討している中小〜大手企業の物流・調達担当者
使用ツール
Figma, Photoshop, Visual Studio Code
「事業内容」や「選ばれる理由」のセクションにおいて、画像とテキストを左右交互に配置する構成を採用しました。 単調なリスト形式になるのを避け、視線を「左(画像)→右(文章)→左(文章)→右(画像)」と自然に誘導することで、心地よい「読むリズム」を創出しています。これにより、情報量が多くてもユーザーを飽きさせず、スムーズに内容を理解してもらえるよう意図して設計しました。
「ご契約の流れ」などのプロセス図は、PC版の横並び配置から、スマートフォン向けに縦積みのタイムライン形式へ変更しました。 狭い画面で図解を無理に縮小せず、矢印(▼)とともにスクロールしながら手順を追える構成にしています。