ロゴ

• 良いことを思いついた瞬間がとても好きなので、「ひらめき」のイメージの豆電球をロゴマークにしました。
• 豆電球のソケット部分を「SAO」の頭文字の「S」の形にしました。

トップページ

全デバイス共通のデザイン

• ロゴマークに動きをつけることで、印象的なトップページにしました。
• ロゴマークは、desvg.jsを使用し、imgタグで読み込んだsvgファイルをsvgタグに置換した後、CSSでアニメーションを付けました。
• 閲覧者が、すぐに目的のページに行けるよう、トップページはシンプルにメニューのみの表示にしました。

画面幅600px以上の時

• メニューの項目をhoverした時に、文字と下線の色が変わるよう装飾しました。

画面幅600px未満の時

• JavaScriptを使用し、ハンバーガーメニューを設置しました。
• menuボタンの三本線と、closeボタンの×印は、CSSで表現しました。

作品紹介一覧ページ

全デバイス共通のデザイン

• カテゴリーページとタグページは同じデザインにしており、変わる部分はページタイトルのみのため、if構文を使用し、タイトルを出し分けることで、テンプレートファイルを無駄に増やさないようにしました。
• jQueryを使用し、上から100pxスクロールすると、ページトップに戻るボタンが出現するようにしました。
• ページトップに戻るボタンの上向きの矢印はCSSで表現しました。
• h1をできるだけ早く読み込ませるため、tagのメニューボタンは、CSSでページ上部に配置しました。

画面幅600px未満の時

• tagのメニューボタンを大きめにし、スマートフォンでも押しやすいようにデザインしました。

作品紹介個別投稿ページ

全デバイス共通のデザイン

• Webサイトの作品紹介ページでは、モックアップを作成し、閲覧者がイメージしやすいようにしました。
• バナーの紹介ページで、お題内容を引用を使って紹介しようとしましたが、ブロックエディターを使用すると、引用元を表記するciteタグが、blockquoteタグの中に自動的に入るようになっていました。MDNのリファレンスを確認したところ、citeタグはblockquoteタグの外で使用されていたため、ブロックエディターのカスタムHTMLを使用し、blockquoteタグの下で、citeタグを使用し、引用元を表記しました。

aboutページ

全デバイス共通のデザイン

• キャッチコピーを順番に表示させるアニメーションを付け、印象づけられるようにしました。
• キャッチコピーのニュアンスが見た目でも伝わるように、Illustratorで袋文字にしたり、色をサイトのイメージカラーにしたりしました。
• 顔写真は、ただ円で切り抜くのではなく、円から少し飛び出すようにPhotoshopで加工し、立体感を出しました。

contactページ

全デバイス共通のデザイン

• プラグイン（MW WP Form）を導入し、お問い合わせフォームを作成しました。
• 入力必須項目には、バリデーションルールを設定し、未入力の場合はエラーメッセージを表示させ、送信できないようにしています。
• placeholderに、あらかじめ入力例を記載しておき、利用者が迷わないよう配慮しました。
• 入力内容確認画面では、項目を薄いグレーにし、入力内容を濃いグレーにすることで、利用者が確認しやすいようなデザインにしました。
• 送信者への自動返信メールや、管理者宛メールも設定しました。