遊び心溢れるデザイン。MaohさんのWebサイトコーディング
キャラクターやアイテムの独特な「動き」が楽しいxAlice公式Webサイト。
今回は、公式HPの製作を担当されたMaohさんにお話を伺いました。
――自己紹介をお願いします。
webサイトのデザイン、コーディングを担当しましたMaohです!
普段はフロントエンド開発者としてお仕事しています。デザインから実装まで一括で担当することが多いです。以前はグラフィックデザイナーでしたが、webの世界に魅力を感じて渡り歩いているうちにこのようなスキルセットになりました。
――xAliceのWebサイトを制作する際のインスピレーションやコンセプトは何でしたか?
大切にしたのは、メインビジュアルを最初に見た時の印象です。
可愛い女の子に見つめられてドキッとしてしまったので、そのドキッとした気持ちを訪れた人にも感じてもらえたら、と思い制作しました。
可愛く、ピュアで、ちょっぴりの毒…がコンセプトです!
――デザインの中で特にこだわったポイントや部分はどこですか?
こだわったポイントは、うさぎ穴を落ちていくような浮遊感と、ギャラリーのセクションです。自由にデザインさせていただいたので、とても遊び心溢れるサイトを作ることができたと思います。
――制作過程で使用したツールや技術、フレームワークについて教えてください。
デザイン工程ではFigma(画像編集等にはPhotoshop)、コーディングにはReact、Next.jsを使用しています。私にとって大変馴染みのある組み合わせです。
――レスポンシブデザインやアクセシビリティに関して、どのような配慮をしましたか?
PC上での見え方からデザインを始めたので、その印象を損なわないままSPの画面サイズに変更するのが少し大変でした。アクセシビリティに関しては、基本的なものは考慮しましたが、特化した対応はしていないので、今後はより多くの人々に使いやすいサイトを追求していきたいです!
――xAliceのWebサイトを訪れるユーザーに一言メッセージをお願いします。
このサイトがあなたとxAliceたちの素敵な出会いのきっかけになれれば嬉しいです。