MAO Design

デモページ お問い合わせ

FammスクールのLP コーディング修正

FammスクールのLP

元々あるLPの修正の依頼を受けました。大元のデザインは変えずに、調整が必要な箇所などの修正をしました。
●修正点
・SEO対策として、HTML内のTITLEを上部に記載した。
・各項目が分かりやすいようH1タグを使用して文字を大きく見せた。
・全体的に画像が大きすぎて13インチのパソコンで見てもスクロールする幅が広かったため、画面サイズに収まるよう調整した。
・似たような内容や、まとめられそうな内容は近接させた。
・YouTubeの埋め込みも一つ一つが大きすぎたので小さく調整し、横2列にまとめた。
・メディア実績で表示されているものと、隠れているものの中で重複しているものがあったので重複しているものは削除。
・同じくメディア実績で「もっと読む」の部分がクリック出来るのか分かりづらかったのでボタンを設置した。
・リンクを別タブで開くようにした。(後で読みたいときにタブが開いているようにするため)
・講師の方々のプロフィールの記載方法が講師ごとでバラバラだったので揃えた。
・電話無料説明会の申し込みバナーがクリックして開くか分かりづらかったので、申し込むボタンを設置したバナーを作った。

Fammスクール LP

使用ツール

Photoshop,VSCode

ポートフォリオサイトのコーディング

ポートフォリオサイト

ページデザインと指示書を元にコーディングしました。
●指示書
・画面サイズ:Macbook air(13インチ)程度を想定
・レスポンシブ対応:なし
・ページや各項目の余白、行間、文字サイズ、カラーなど:類似した色・サイズ感であればOK
・写真が挿入されている箇所について:挿入の必要がない旨を指示している箇所以外は挿入。
同じ写真でなくとも構わないが、イメージ画像からそのまま切り抜くことはNG。
・WORKSの作品画像はダミーのリンクを付け、ホバー時に暗くなるようにする。
・「and more...」はホバー時のアニメーションを実装。
・ヘッダー及びフッターのロゴは同フォルダに格納されている画像を使用する。
※名前と経歴は自身のものを記載しています。

ポートフォリオサイト

使用ツール

Photoshop,VSCode

架空のコワーキングスペースのLP コーディング

架空のコワーキングスペースのLP

ページデザインと指示書を元にコーディングしました。
●指示書
・画面サイズ:Macbook air(13インチ)程度を想定
・レスポンシブ対応:なし
・ページや各項目の余白、行間、文字サイズ、カラーなど:類似した色・サイズ感であればOK
・写真が挿入されている箇所について:挿入の必要がない旨を指示している箇所以外は挿入。
同じ写真でなくとも構わないが、イメージ画像からそのまま切り抜くことはNG。
・「座席予約」「会員登録はこちら」のボタンはダミーのリンクと併せてホバー時のアニメーションを実装。
・その他のメニュー項目は、ページ内の該当箇所に飛ぶように設定。
・ヘッダーの「運営会社」「利用規約」「プライバシーポリシー」「推奨環境」はダミーのリンクを設定。
・地図は同じフォルダに格納されている簡易の地図画像を挿入。

架空のコワーキングスペース

使用ツール

VSCode