Portfolio
ByAimiOnuma
Nice to meet you.
My name is Aimi Onuma.
青森県三沢市出身です。
水の性質のように柔軟性を持って、
「顧客の個性と魅力を伝え、届ける・受け手の心と体が動く。」
ように仕事をするのがモットーです。
気になったものは調べ尽くしたい癖を活かして日々進化しています。
My
0
months
Whatisthis number?
Back
企業・競合分析を行い、これから新築を立てる世代・長い目で良い家具を揃えたい層に向け、リッチでアメリカンな印象を与えられるデザインにしました。
地元青森県にあるアメリカ家具専門店の公式サイトです。
戦略定義からデザイン、コーディング、SEO対策まで、フルリニューアルをゼロから全て行った初作品です。
創業から30年以上。
Webサイトの役割は、「地域に合った広報活動で興味を持ったお客様の情報の受け皿」と明確にした上で、「SNSの新しいチャネルでの集客」とあわせて、コンバージョン達成を狙いました。
実店舗と旧サイトには、店内の様子が見えにくいという課題があったため、
商品と一緒に内観の雰囲気を伝えたいと思いました。
店舗の魅力や個性を引き立て、ユーザーの行動喚起に繋げるためにも、今回は写真での視覚的なアプローチが良いと考えました。
また、構成はシンプルさを意識し、必要な情報が伝わるように意識しました。
重要なファーストビューの写真は地元の写真屋さんに撮影を依頼しました。
他の、PRODUCTのセクションで使っている商用イメージ以外の写真は、全て自分でカメラアングル等は練習して、撮影、レタッチをして使用しました。
店舗で扱っている商品や雰囲気の、ヴィンテージでアメリカンなカッコイイ感じをそのまま活かそうと思ったためです。
PRODUCTセクションのスライドショーはJQuery・Swiperのオプションをオリジナルカスタマイズし、
企業の色を出しつつも、省スペースで、たくさんの画像をユーザーが見られるように設計、コーディングしました。
アメリカらしさや、アメリカ家具の重厚さを表現し伝えたかったので、大手ブックマークサイトの国内外のインテリアサイト・アメカジファッション等のサイトを見尽くして、使われている文字や、色を研究しました。
ロゴは、なるべくクライアントがイメージする、納得するものをそのまま使いたいと思い、下書きをもらい、ファビコンなどで小さくしても特徴があるようにIllustratorで作成しました。
経営状況と、地域性とお客様層の属性柄、Webサイトへかける広告費に対しての優先度が低く、サイトはあったものの分析出来るデータもまったく無い未知数でした。
かつ、今回顧客から依頼があったわけではなく、私からの「サイトを作らせて欲しい」という希望を逆に叶えて頂いた形だったので、コンバージョン設定についてのミーティングでは
「まあ少し来店数が増えてくれたら嬉しい」というふんわりしたものからスタートしました。
暗中模索の中、ひとつの店舗の顔として作品を作るという責任を噛み締めながら、毎日リサーチをし、ベンチマークサイトをひたすら研究する日々が始まりました。
ワイヤーフレームの作成の前に、作戦定義をし、制作までのフローを可視化するため、まずはSWOT分析で課題や強み、ターゲットの明確化と言語化を試みました。
アメリカ家具の専門店として青森県の町で30年続いている理由と、今の時代に合った新たな機会に繋げる弱みを洗い出すため、未経験という気持ちは捨て、WEBデザイナーとしての目で徹底的に研究しました。
今までの宣伝方法は、青森県南部地方でのみ販売されているローカル新聞、市内と大型ショッピングモール前の看板です。
東北地方で、競合が少なく、リーズナブルで、専門性が強い老舗店であるという強みは、この機会に是非全面的に出していき、おうち時間が増える中をよりリッチにしたい、こだわりたいという層に向け、親しみやすい情報発信をしようと考えました。
アフターケアや、地域に根ざしたお店であるということも記載し、お客様が家でなるべく店舗に行ってみようという決心が出来るように、写真や情報を充実させました。
お客様が快適に家具を使えるように工夫された、長年の経験による技術や配慮と、店舗が三十周年を迎えたことも是非形にしたいと思い、下層ページ「Commitment」を作り記載しました。
実績のある店舗であるという証明とともに、安心感に繋がるのではないかと考えました。
InstagramグラフAPIを用いて、インスタへの最新投稿が一覧で見れるセクションを作り、フェイスブックとも連動、新たな集客チャネルとして徐々に、長期的に機能するようにしました。
モバイルに適した軽量さにし、検索エンジン最適化の流動的なアクションをしつつ、サイトの手直しをし、地元の観光協会や商工会などのローカルネットワークにコンタクトを取って、WebサイトやSNSアカウントの更新をして露出を広げました。
コンバージョンは、購買につながる来店率のアップです。
ですので、ありのままのカッコよさを引き立てるサイトにしました。そしてそれを、来店可能な範囲の潜在顧客に伝えなければいけません。
サイトの効果については、クライアントにデータを適宜お送りしました。
また、今後の課題の明確化と効果測定のため、何を見てお問い合わせ頂いたか、なるべくお客様に聞いて欲しいということをクライアントに伝えました。
すると、サイトを公開しインスタを更新し始めてから約二ヶ月経ち、徐々に「インスタを見て」や、「Googleで検索して電話をした」など、WEBサイトやSNSを起点に、実際に購買に至ったケースが増え、少しずつ効果を実感することが出来ました。
Back
「現役フロントエンドエンジニアが講師を務める、オンラインスクール」という設定のデザイン課題です。
ユーザーが比較検討をしている事を想定し、競合のオンラインスクールを調べ、個性とインパクトを残すような配色で、デザインにも応用出来るグラデーションを選びました。
「本気で、本物の力をつけられるオンラインスクール」というコンセプトで、未経験で不安や不満を持ったユーザーへ、解決策の提示から行動喚起までのカスタマージャーニーを強く意識した構成にしました。
また、実際の現場と同じように、クライアント実際にそこにいて、不足しているコンテンツは一緒に考え、提案している心づもりと、共同作業するひとたちを念頭に入れて制作しました。
「今はまだ、出来ないことが多いけど、絶対に出来るようになりたい」と思っているターゲット層であるユーザーに刺さるようなビジュアルとコンテンツを強く意識しました。
またXDでアニメーションや、動きなどもデザイン出来たら、クライアントとコーダーのイメージが湧きやすいかと思い、パララックスを表現しました。
配色は、たくさんあるオンラインスクールがある中で、ユーザーの印象に残るものを選びました。
競合調査をしたときに、サービス内容や金額と一緒に配色も確認し、オンラインスクールや教材のサイトで、よく使われている色をあえて使わず、大胆な色使いを意識しました。
フロントエンドエンジニアを目指しているユーザーは、ハイセンスな感覚を持った人が多いと予想しため、ロゴは国内外のアイディアを見て、ネガティブデザインが印象的なタイポグラフィーを参考に作成させて頂きました。
使用した写真は、日本人のモデルのものをメインに探しました。
無料素材の写真はそのまま使うと、叶えたいイメージに近づけなかったので、Photoshopを使って、修正やレタッチ、切り抜きをして、利用しました。
あしらいは、まずはイメージにあるものを見て、作り方を調べ、Photoshopとillustratorを使い分け自作しました。
コンバージョンの無料説明会参加のセクションは、右上固定のものと合わせ、計5つ設けました。
読み進めるほどにユーザーの不信と不安を取り除き「まずは参加してみるか」という心理を確実に拾えるように、意識しました。
ワイヤーフレームは納得いく形に出来たものの、そこから難航しました。
細部のデザインまで考えたときに中身がなかったからです。
このまま真似て良いのかと不安だけが募りついに手が止まりました。
論理的な根拠やデータが足りないと私はデザインは出来ないと思い知り、ベンチマークサイトの事業内容を調べることにしました。
また、誰かのために何かを果たすための目的をもたせたものでないと、自分のモチベーションが続かないことも、この課題でよく分かりました。
ペルソナ設定の重要さを実感しました。
このデザイン課題は、アメリカ家具専門店メクレンバーグ公式サイト制作中の、同時並行の課題で、
どちらも初めてゼロから作り上げるものだったので、集中力が必要でした。
困っている人、つまり顧客と、そのサービスを享受する人を想像することで、集中して制作することが出来ました。
今回は、メンターが事業を始めたてで困ってるというイメージをしています。
課題として貰った事業内容を整理し、SWOTで分析を行い、競合サイトを研究、コンバージョンに繋がるような、WEBプロでしか出来ないことを模索しました。
間口を広げず、WEBプロの内容がヒットする層にだけ向けたデザインが良いのではないかと考え、ライティングも含めて作りました。
「本気で、本物の力をつけられるオンラインスクールを探しているユーザー」ならば、具体的に何を教わることが出来るのかを、専門用語を使ってでも小出しで明示した方が印象に残りやすいのではないかと考えました。
コスト面でWebプロは強みがありましたが、安さで他社との差異を作るのではなく、
認知度や大手には叶わない保証制度などの弱点を感じさせない、Webデザイナー・フロントエンドエンジニアとして「実力をつける」ということに特化させることにより、
ターゲットから外れるであろう「全くの未経験の受動的な人」の層の振るい分けにもなると考えました。
全体に用いているグラデーションの色数を利用し、濃淡を使い分けて各要素に個性を持たせました。
また、目立たせたい部分とのサイズの大小比較と合わせて、視覚的に分かりやすくなるように意識しました。
分析を行った上での、WEBプロにしかない強みが活きるような、訴求力ある文章を心がけました。
また、統一感を出すため文章量を調節したり、ストーリー性のある構成を意識しました。
Back
2020年6月から勉強し始めてから制作した実案件や課題の制作物を、自己紹介をかねて、個性も散りばめつつもシンプルな構造でまとめました。
「水の性質のように柔軟性をもって臨機応変に仕事をする」というモットーがあるのでモチーフは水です。メインページは水の中で、深層に潜るようなイメージにしました。
また、メインビジュアル中央のテキストに、Research(調査)、Writing(文章)、Coding(コーディングスキル)、Design(デザインスキル)と出来ることを記載し、それを裏付けられるような下層ページの構成にしました。
顧客、自社(自分)、世間、未来、
四方良い作品を作りたいという気持ちを持って制作しました。
本を読むことが好きなのと、7年間人材業界で人と企業を繋ぎ結果に結びつけるための推薦文など、ポジティブな文章を書く機会が多かったので、作品にもそれを活かしています。
アニメーションはコードを書きながらデザインしました。
スクロールで歪む背景、シームレスなページ遷移、スクロールの閾値で発火するアニメーション、好きな色に変更可能な背景色など、見ている人がわくわくするものや、グリッドレイアウト、グラスモーフィズムなど、比較的新しいものも積極的に取り入れて実装しました。
私はスニペットを分解して合体させたり実験するのが好きです。
根拠あるデザインに紐付く技術を、適宜使えるよう、これからも勉強し続けたいという気持ちを、それらで表現しています。
GoogleフォントとAdobeFonts、フリーフォント、最後までいろいろ試しました。
見ているだけでも楽しかったです。
結果、統一感を重視して、メインには水の落ち着いたイメージと合うモダンな雰囲気が出るようなフリーフォントを、本文中の日本語は読みやすさ重視の等幅フォントを使用しています。
配色はなかなか決められなかったので、見ている人に選んでもらおうと思い、メインビジュアルのスライダーで背景色を変更出来るデザインにしました。
それに合わせ、他で使っている色は、白と黒をメインにし、あしらいにホログラム風の素材を使用しています。
自分の名前の「AIMI」を全部くっつけたデザインです。
モチーフの水の水滴も取り入れillustratorで作成しました。
WEBプロのセクションで、XDで作ったパララックスを動画にしたいと思ったため、PremierePROで動画編集をしました。
今回は、軽量さを出来る限り追い求めたかったので、クリックするまで読み込みを開始しないYoutubeの埋め込みにしました。
画像フォーマットは圧縮率が高く透過の書き出しも可能なwebpを出来る限り使用しました。
プラグインも安直に入れすぎないように、CSSで表現出来るものはCSSを使うよう意識しました。
また、カクつきを抑えるため、GPUで処理されるプロパティをなるべく使用しました。
基本となるモバイルのデザインに、パソコンのデザインを付け足していきました。
前作では、タブレットのデザインはJSで制御、ブレイクポイントは3つ出来て大変でしたが、今回はブレイクポイントは1つでJS無しでレンスポンシブ対応しています。
calc、rem、vw、vhなどを活用しました。
自分で手書きした画像でmaskをかけたり、ジブリが好きなので、去年から無料配布されていた思い入れ深い画像を使わせて頂いたり、メインページには遊び心を随所に取り入れました。
主観と客観が入り交じり、不安になってはデザインと構成を練り直し、
新しい言語をもう少し勉強してからにしようか、
ベンチマークサイトをもっと徹底的にいくつか調べてみようかと堂々巡りで、
最初は焦りばかり感じていました。
今回はコーディングと同時進行のデザインでしたが、
やりたいことと求めるものに体と知識が追いつかないような、猛烈なストレスを感じました。
デザインもコードもライティングも、客観的に見て良くないと思いつつも、
どうしたら良いのか考え始めると、改善点が果てしなくあるように感じました。
見失いそうな時は落ち着いて、この9か月でやったことを振り返りました。
作戦定義から制作までのフローに基づいて目下の課題に立ち戻り、初めは、完成度6割程を目標に、ワイヤーフレームに落とし込んで可視化。今まで通り、SWOTで課題や強み、ペルソナの明確化を試みました。
ペルソナの採用担当者は、実務にも主体で関わっている人物です。
ですので、弱みを強みに転化するためには、伸びしろを判断して頂く必要があり、自走力を見てもらう必要があると考えました。
そして、下記の相乗効果、総合力を強みとして、これを軸にデザインと構成をしました。
未習得言語や総じて経験不足等の弱みは放棄して強みの強化に資源配分するため、
今の強みを活かす、これまでの一つ一つの案件詳細を主体にしました。
色々なパフォーマンスが出来るよう、実験と経験を重ねていきたいです。
これまでも、効率的に技術を身に付けるため、作品制作のたびに、新しい技術やデザインに挑戦してきました。
全ては、画像は綺麗に、アニメーションは滑らかに、軽量で速く、見やすい、色んな可能性を秘めたわくわくするウェブ作品が作りたいという思いからです。
今回のポートフォリオでも、今の技術でできる限りの工夫をしました。
これからもたくさんの挑戦をさせて頂けたら、嬉しく思います。
Back
2020年6月～10月にかけての、今までの学習の道のりです。
コーディング課題が3つ、
企業のコーポレートサイト研究が10、
バナーを12、制作しました。
その中から抜粋しご紹介します。
良いWebサイトから気づきを得る課題でした。
下記のようなポイントをインプット出来るように注意しながらレビューしました。
この研究課題は、のちの制作に、大きな影響を与えました。
ここで研究した10のサイトは、共通して、「明確なターゲット層」に向け、本質的な課題をどんな流れで解決できるかが、網羅的に書かれていることが分かりました。
また、直感的な操作が出来、企業の色や個性を出しつつも、伝えたいメッセージに優先順位が付けられたデザインによって彩られ、
そのどれもが、コンバージョン達成に向け、効果的に機能していました。
バナー制作では下記のポイントをを心がけました。
実際にある企業のバナーを担当したつもりで取り組みました。
全てPhotoshopで制作しています。
バナー制作は、Web制作とは違い、限られた枠の中で、情報量を少なくした上でテクニカルな訴求を行うことを意識しました。
写真や、テキストがそれぞれ引き立つよう、コントラストやカラーを調整し、切り抜きや、レタッチをして素材を合成しました。
この制作課題でPhotoshopの操作に慣れたことによって、素材を自分で調達し加工することが出来るようになっていきました。
見出しの文章など、端的にターゲットに訴求する意識を持つことが出来ました。
