Site-4
コピーする
パスワード兼ユーザーID :
概要
Engressという
「架空の英語スクールのホームページ」
を制作しました。
「デザインカンプからのコーディング」
が私の担当範囲です。ただ、1280pxサイズのみのデザインカンプからコーディングしたため、それ以外の画面サイズでのデザイン,レイアウト調整に関しては私が担当しております。
※実在しない事業のサイトで検索結果が汚染されるのを防ぐため、サイトにはアクセス制限をかけています。アクセスの際は上記の「パスワード兼ユーザーID」をご使用ください。
使用スキル
- ・HTML
- ・CSS
- ・jQuery
- ・WordPress
工夫した点
記事を入力・更新しやすい
カスタムフィールド
プラグインの「Advanced Custom Fields(ACF)」を使用し、データの管理がしやすいようにしました。対象箇所は、トップページの成功事例にある画像と各テキスト、コース・料金ページにある価格表の金額部分です。
横スクロールが可能であることを伝える
スクロールヒント
JSライブラリの「ScrollHint」を使用し、横スクロールが可能なコンテンツを視覚的にわかりやすくしました。対象箇所は、コース・料金ページの価格表です。
記事一覧における各記事タイトルの
省略表示
自動出力される記事のタイトルに文字数制限をかけました。これによって、タイトルがどれだけ長い記事でも、レイアウトが崩れることなく表示されます。
30件以上のダミー投稿による
ページネーション動作の確認
テーマユニットテストデーター（日本語版）を用いてダミー投稿をし、ページネーションが正常に動作するか確認しました。ページネーションには、プラグインの「WP-PageNavi」を使用しています。
記事をクリックひとつでシェアできる
ソーシャルボタン
プラグインの「WP Social Bookmarking Light」を使用し、コンテンツにソーシャルボタンを表示しました。これによって、記事をシェアしやすくし、アクセス数の増加を図ります。ソーシャルボタンの表示位置はPHPで指定しました。対象箇所は、ブログページの下層にある記事ページです。
同一カテゴリーの記事が自動出力される
関連記事
関連記事のエリアでは、現在表示している記事と同一カテゴリーを持つ記事を判定し、自動で表示されるように設定しました。これによって、閲覧者の回遊率のアップを図ります。
記事の管理が楽になる
カスタム投稿タイプ
お知らせ部分をカスタム投稿タイプに設定し、投稿(ブログ)と別メニューにしました。これによって、お知らせ記事のカスタマイズや管理が行いやすくなります。
お問い合わせ内容の
確認メールの自動返信
プラグインの「MW WP Form」を使用し、お問い合わせをした方とサイト管理者の両者に、フォームで入力されたお問い合わせ内容の確認メールを自動で送信するように設定しました。
下層ページで現在位置が把握しやすくなる
パンくずナビ
プラグインの「Breadcrumb NavXT」を使用し、パンくずナビを実装しました。閲覧者がサイト内のどこにいるかを視覚的に把握できるようにし、ユーザビリティの向上を図りました。
各デバイスサイズに適応した
レスポンシブデザイン
スマホやタブレット、ノートパソコンはもちろんのこと、表示崩れが多い1920px以上の大画面サイズにも対応しているサイトです。サイトのレイアウト崩れによって、ページ閲覧者が直帰することを防ぎます。