WEBサイト
以前はデザインフェスタや手作り市など対面販売を主に活動してきましたが、コロナ禍でイベントへの出展が困難になり、Minneなどネット販売に進出することにいたしました。
過去作品やオーダーメイドの制作実例などを展示する場所として活用予定です。
【使用ツール】
Photoshop CC
Illustrator CC
Dreamweaver CC
teraPad
【使用言語】
HTML5
CSS3
jQuery
【制作期間】
約1ヶ月間(講義時間含む)
【メインビジュアル】
各デバイスごとに画像を設定
jQuery”SLICK”を使用し、ふわっとクロスフェードしながらスライドします。
あえて画面いっぱいではなく、つまみ細工の説明がファーストビューに入るように配置しました。
【ハンバーガーメニュー】
ハンバーガーアイコンは和の雰囲気に合うよう菱形にしました。
正方形を回転させて菱形にすると全てのパーツが斜めにずれてしまうため、見えている◆の外側と内側に仮想の■を作り、表示位置を調整しています。
ハンバーガーメニュー表示時はロゴが邪魔にならないよう、jQueryの独自メソッドを記述し非表示にしています。
【作品紹介】
PC版ではマウスオンで商品名が表示されるようになっています。CSSで設定しています。
上段にはつまみ細工、下段には水引細工の作品が３点ずつランダムに表示されます。
【イベント出展情報】
閲覧環境に左右されず自然な改行ができるよう、可変の枠を設定しました。
【作品紹介】
今回このサイトをオリジナルテーマ化した目的は、つい後回しになりがちな作品登録を簡素化することで登録漏れを防ぎ、一覧として意味のあるページにすることでした。
カスタム投稿タイプを作成するに当たっていくつかのプラグインを比較した結果、「カスタムフィールドテンプレート」を使用しました。
「作品詳細へ」をクリックで販売サイトの商品ページにさせるため、個別ページはfunctions.phpで非表示にしてあります。
jQuery”SLICK”を使用し、時間経過またはスワイプで画像が切り替わります。(最大5枚)
【お問い合わせ】
PC版では応募フォームの幅が大きすぎると使いにくいと感じたため、少し幅を狭めました。
プラグインContactForm7を使用しました。
サンクスページの設定方法は賛否あるようなのですが、今回は「送信できたことが明確にわかる」ことが目的のため、HTMLのformタグに指定する方法で実装しました。
【よくあるご質問】
JavaScriptを使わずにCSSのみで実装しています。
質問をクリックすると回答が表示され、＋も回転しながらーに変化します。
