アーティフィシャルフラワー販売サイト 花つつみ-hanatsutsumi-様 URL※クライアント様のご事情によりまだ公開されておりません。↓はダミーサイトのURLになります。 https://nishiyamayuki.sakura.ne.jp/hanatsutsumi/ ・クライアントについて アーティフィシャルフラワー（造花）やプリーザーブドフラワー、ドライフラワーのフラワーデザイナー。ラッピングやカルトナージュの講師もされています。 ・現状について 販売サイトに関しまして、15年以上前に制作された販売サイトをお持ちですが、ご両親の介護のこともあり、5年ほど更新もされていない状態。 ワークショップや講師としての活動も現在自粛中とのことで、アーティフィシャルフラワーの販売のみに集中されたいとのこと。 ・サイトをリニューアルする目的 15年以上前に制作されたものなので、デザインが古い。もう少し新しいデザインにしてほしい。 ワークショップや教室のお知らせは現在不要なので、アーティフィシャルフラワーの販売メインの構造にしてほしい。デザイナーや講師としての経歴や実力よりも作品の魅力を伝えたい ターゲットの年齢層が40代～60代であるため分かりやすい、見やすい、読みやすいサイトにしてほしい。 ・デザインコンセプト フォント 明朝体ベースのエレガントな日本語フォント ＋ 視認性の高いサンセリフ体の英字（上品さと読みやすさの両立）   大きな見出しには、「しっぽり明朝」「CINZEL」を使い、上品さを表現しました。他にも「キウイ丸」や「Josefin Slab」等も使い、お花のイメージに合うような女性らしいデザインを表現しました。 カラー くすんだ紫をメインに、女性らしい色合いにしました。お花の画像を多く使うサイトですので、色数は少なくしました。 ・制作過程 ①打合せ クライアント様のイメージや認識にすれ違いが起こらないように、文章や言葉だけで表現せず、必ず画像や映像を使って説明。 打つ合わせがスムーズにいくように参考サイトを多めに用意し、配色を8パターン用意。お客様のご希望の色合い、私のイメージする色合い、あえて正反対の色をご用意し、クライアントのイメージやこだわりについて確認する事が出来ました。 ②Figmaでワイヤーフレームとデザインカンプを制作。 制作期間内に完成できるよう、ページは少なめに提案。デザインの段階では、アニメーションは実施しない予定でした。 ③VScodeでHTML・CSSコーディング 40代～60代をターゲットとしている事から、斬新で新しいデザインやアニメーションは使わずに、シンプルな構成にしました。 サイトの上品なイメージを表現するために一部、jQueryを使ってアニメーションを追加しました。 ④ネットショップに関しては「BASE」を利用しました。 ・できたこと デザインした通りのコーディンができた。 余裕を持って、期間内にできたこと。 カラーデザインやデザイン案を複数作り、提案できたこと。 ・できなかったこと 期間を優先しすぎた事で、javascriptでアニメーションは付けない予定でいたこと。最初から、どの程度アニメーションをつけるかをデザインの段階で決めて、まとめてクラス名をつけていれば、さほど時間はかからなかった。 デザインに時間をかけられなかった。 BASEのjavascript、jQueryの方法が分からなかった。 ・今後の課題 javascript、jQueryの理解。 CMSの勉強。今回BASEを使ったので、もっと使いこなせるようにする。 制作にかかる時間や期間を正確に把握する。スケジューリング能力を身に着ける。 デザイン確定後に、フォントのみとはいえデザインの変更があった。フォントのみでもコーディン後に変更するのは少し時間がかかってしまった。Figmaで見た時と実際にブラウザで見た時で印象が変わってしまうことも考慮できるようになる。