WEB DESIGN
GROWTH NAVI
支給されたデザインをもとに、ECモール運営代行サービスのLPをStudioで実装しました。
担当範囲|使用ツール
担当範囲
実装のみ
使用ツール
Studio
IMPLEMENTATION POINT
実装のポイント
SEOを意識したタグ実装
デザインを実装するだけでなく、公開後の検索評価も意識してマークアップを行いました。
・見出しタグ(h1〜h3)を装飾目的ではなく文書構造として正しい階層で設定
・meta description、OGP設定(タイトル・画像・説明文)を各ページ・セクションの内容に合わせて調整
・画像のalt属性を内容が伝わるように設定
・セクションごとにアンカーリンク(#problem、#serviceなど)を設定し、ナビゲーションからの遷移とURL構造をわかりやすく整理
料金体系テーブルの実装(左列固定+横スクロール)
比較項目・プランが多い料金表だったため、スマホ表示時に情報が見切れないよう、左端の項目見出し列を固定したまま右側だけ横スクロールできる形で実装しました。横スクロールしても「どの項目を見ているか」が常にわかるようにし、情報の可読性と操作性を両立させています。
INSIGHTS
得られた知見
・デザイン通りに再現するだけでなく、「公開後にどう見られる・使われるか」を意識した実装(SEO・操作性)の重要性
・複雑な表組みをレスポンシブ対応しつつ視認性を保つレイアウトの工夫
