animoのロゴ・ポートフォリオサイトデザイン

ご覧いただきありがとうございます。
デザインとイラストを担当している ”みさ” です。

ポートフォリオサイトを制作するにあたって私が担当した範囲は以下の3つです。

・ロゴデザイン
・サイトデザイン
・イラスト

本記事は、animoのロゴとポートフォリオサイトのデザインの紹介をしています。
合わあせて、大切にしたポイントなどもお伝えできたらと思います。

あまり長くならないように気をつけますが、長くなりそうです…！（すみません）

気になるところだけ読みたい！という方はぜひ目次をご活用ください。
※見出しをクリックorタップでリンク先にジャンプします。

コーディングは兄の ”まついち” に担当してもらいました！
コーディングの工夫点や、コーダーのまついちがどんな人なのか気になるという方はこちらの記事をご覧ください。

animoのロゴ

ポートフォリオサイト、名刺などを想定して制作しています。

animoのチームロゴの制作はロゴデザインとはというところからじっくり学びながら行っていて、制作期間は1ヶ月ほど。
私たちの特徴や強みに向き合い深掘りし、たくさんラフと修正、チームメイトの兄と相談を重ねて、愛着が沸くお気に入りのロゴができあがりました。

コンセプトは「兄妹とつくる優しいデザイン」
”兄妹「と」つくる” 、私たちだけでつくるのではなく、お客さまや一緒にお仕事をしていく方たちと共にデザインをしていくという思いを込めています。

animoのコンセプトは、私たちの特徴や強み、どんなふうになっていきたいかを言葉にし、そこから特に大事にしたいと思う言葉を抽出してそれを一言にまとめると…という形でできました。

抽出したキーワードは「ぬくもり、優しさ、安心感」です。

animoのキーワード、コンセプトをもとにロゴのアイデアを書き出していきました。
想定した使用用途で使いやすいか、自分たちチームはこういうところだよ、と紹介したくなるようなロゴになることを目指しました。

鉛筆を使い、方眼紙にもくもくと。
ひとつひとつのアイデアに、「らしさ」を込めて。

手書きの下書きたちの中から、候補をしぼってIllustratorで整えました。
パスやフォントになると、ロゴになってポートフォリオサイトに使ったときや名刺にしたときのイメージが湧きやすくなりました。

この段階で兄に確認してもらい、兄からの意見をもらって少しアレンジを加えています。
出来上がったラフを一緒に見比べてもらいながら選別し、現在のロゴに決定しました。

タッチアイコンやファビコンとしても見栄えする印象的なシルエット、ちいさくなっても可愛らしい印象というところが選ばれた理由として大きかったです。
サイトのデザインが変更していっても他の要素にしばりを与えにくいデザインになったのではないかなと思います。

静的なサイトのデザインから、WordPress化に向けた投稿一覧・個別ページのデザインまで行いました。
もともと学びのアウトプットも兼ねてブログを書きたいという思いは二人共あったので、ポートフォリオサイトとブログをかけ合わせています。

当サイトはスマートフォン、タブレット、PCユーザーを想定したレスポンシブデザインになっています。
制作していくなかでサイトマップやワイヤーフレーム、コーディング担当の兄に宛てた指示書の作成も行いました。

こうして書いた記事が手掛けてきたデザインの中にあることに、感動しています…！
改善点も見えてきますが、公開するところまで走れて嬉しいです。

サイトのデザインは画面の向こう側にいる人に温かみが伝わることを目指しました。
キレイよりも可愛らしいイメージのデザインが得意なので、優しさやぬくもりが届くように心がけています。

より優しいイメージになるよう、以下の6つを大切にしました。

・暖かみのある配色
・ゆとりのある余白
・丸みのあるデザイン
・イラストを使って親しみやすく
・心地よく感じられる程度にゆっくりとしたアニメーション
・タイトルは日本語を使ってわかりやすく

animoのロゴ、ポートフォリオサイトのデザインの制作を振りかえってきました。
長い期間向き合っていくなかで、新しい気づき学びがたくさんありました。

課題もたくさん見えますが、育ててゆくような気持ちで向き合っていけたらなと思います。
ここまで目を通していただきありがとうございました！