サンプルWebサイト『カフェサイト01　翠月堂』を作りました

二つ目のWebサイト『翠月堂』が完成しました。
前回のコーポレートサイト同様にWebデザインの練習やポートフォリオ作品のテーマにも扱われやすいカフェ系サイトになります。

アンティークな趣のあるカフェをイメージしつつ、マスコットキャラクターを用いて明るさや可愛らしさを演出して若者受けもしやすい仕様にしてみました。
近年はアニメや漫画などのサブカルチャーの人気が中高年層からも受け入れられているので、こういった演出を扱えた方がスキル的にも良いのでないか？と考えています。
各ページの基礎的なものはコーポレートサイトと同じぐらいのペースで構築できたのですが、メニュー画像や雰囲気を演出するための各種素材の調達や編集に時間を要しました。

サイト自体はコーポレートサイトと同じくWordpressとElementorで制作方法そのものはほぼ同じですが、メニュー画像にできるだけ一貫性を持ちたいという個人的なこだわりで集めたフリー素材画像をPhotoshopを使って編集ました。
メニュー画像もできるだけ一貫性を作りたかったので、ス素材サイトからメニューに使えそうな写真画像を集めた後、必要最低限の編集ながらもフォトショップを使ってレタッチと同じ背景と合成して作りました。
マスコットキャラクターもフリー素材のものをサイトに使えそうなポーズや表情などの差分があるものを探して使用しました。
自分でイラストソフトを使って描くという手もあったのですが、デザインから各種差分の制作を考えるとかなりのスケジュールを要してしまうことと、本作はあくまでＷｅｂデザインが主題であるため、今回はフリー素材の範囲で上手く活用する方針に至りました。

いくつかの素材はイラストソフトのSAIやクリスタを使って加工しております。（ランタンの画像など）
ブログはElementorの機能を応用してブログ風に作った固定ページです。
メニューの商品解説やブログ記事等もマスコットキャラクターが喋っているような文章に仕上げました。
これに関しては趣味で小説を書いていた感覚の応用で仕上げることが出来ました。
しかし絵文字や顔文字を多用した文章は普段ほとんど書かないので、今回の文章が自分の中ではそれらを多用したお初の文章と言えます。
（少し気恥ずかしかったです）
職業訓練校の修了制作の一環でこのデザインもポートフォリオサイトと共に作ったものですが、画像の加工や文章の作成の労力が一番多かったのでこのサイトが一番作るのが大変な作品でした。
当初はもっと簡単に仕上げると思っていたのですが、デザインや素材の整合性を付けようとしていたらいつの間にか大工事になっていました。

しかしながら自分が普段使わないような機能やレイアウトを用いる場面が度々あったので、試行錯誤をしながらも勉強も兼ねて楽しみながら制作することができました。

よろしくお願いします。

カフェサイト01『翠月堂』はこちらから