Profile
中谷 美尋 - nakaya mihiro
1997年生まれの札幌育ちです。大学卒業後、社会勉強のために地元を離れて東京で4年間働きました。主な職歴は、進学塾での進路指導および教務です。 2024年の春に札幌へ戻ったことを機に新たなキャリアビジョンを拓きたいと思うようになり、かねてより関心のあったWebデザインの技術を学ぶため、職業訓練校『まなクル白石 Webクリエイター科』へ入校しました。
音楽を作ることが主な趣味です。画面右下から再生できるBGMも、本サイトの雰囲気に合わせて制作しました。 音楽制作の趣味に付随して、簡単なイラスト制作・動画制作もできます。
Skill
使用できるツール・有している技能
コーディング
- HTML
- CSS
- jQuery
- Java Script
HTML/CSSを用いて、イメージを正しく表現するコーディングができます。jQuery,Java Scriptを用いて、動きのあるサイトを作ることも可能です。 サイトを制作する際は、誰がいつどの媒体で見ても最善の状態で情報を受け取れることを常に目指しています。
使用ツール ¦ Visual Studio Code
デザイン
- Photoshop
- illustrator
- Canva
編集ソフトを用いてバナーやWebサイトのデザインを制作できます。 また、職業訓練校でAdobe製ソフトを使用する以前は、業務でCanvaを使っていました。
[illustrator]バナー広告、ポスター、名刺の制作
[Photoshop]バナー広告、ポスターの制作、レタッチ、基本的な画像編集
その他
- 動画編集
- イラスト制作
趣味から派生して、動画編集とイラスト制作を独学で学びました。 動画編集においては映像のカット・トリミングや音声編集、テロップ挿入、エフェクト挿入など基本的操作が可能です。 イラスト制作では、ibisPaintを使用していました。
使用ツール ¦ Aviutl, ibisPaint
Works
制作したもの
このアイコンもしくは画像をクリックで、拡大画像とデザイン説明をご覧いただけます
Adobe illustrator
ロゴデザイン① 『STUDIO MU(スタジオ ムー)』
- 個人練習に特化した防音スタジオの企業ロゴデザイン
「スタイリッシュでかっこいいロゴで」 という要望があった想定
10代後半~30代 男性寄り (コアターゲットは10代後半~20代後半)
白と黒のスタイリッシュな配色を目指しました。
差し色の赤~橙=共感覚的にド(C)を表します。また、明るく賑やかな色なので「個人利用も楽しく」という意味合いも持たせました。
デザイン音(音声波形)が防音室の扉から響いているデザインです。
ロゴを敢えて枠内に収めずずらすことで逃げ場を作り、個人利用に孤独で閉塞的な印象がつかないようデザインしました。
“I”(=私)に色付けをすることで個人利用特化という特長を印象付けました。
制作時間 2時間
架空ロゴ
防音スタジオ『STUDIO MU』の企業ロゴデザイン
制作時間:2時間
ロゴデザイン② 『Shinsei株式会社』
- 賃貸を主力とする不動産会社のロゴデザイン
「企業のマスコットキャラをメインに」 という要望があった想定
10代後半~20代 (新生活を迎える若者がメイン顧客)
若葉マークをイメージした黄色と緑の配色です。
メインの緑色は若者・新生活を想起させるフレッシュな色を使いました。
デザイン屋根をモチーフにしたキャッチーなキャラクターを制作し、マスコットキャラのインパクトを邪魔しないようロゴはシンプルにしました。
iからiへの橋渡しをするオブジェクトは、若者(若葉)が時を経て一人前の人になっていく様子をイメージしています。
制作時間 1.5時間
架空ロゴ
不動産会社『Shinsei株式会社』の企業ロゴデザイン
制作時間:1.5時間
ロゴデザイン③『株式会社AIP』
- AI搭載のペットロボットを作る会社の企業ロゴデザイン
「意味の詰まったシンボルマークが欲しい」 という要望があった想定
20代後半~40代
青~ピンクのグラデーション(機械感のある寒色から温かみのある暖色への変化) →AIが人の心を理解していく様を表しています。
デザイン中心の三角から外側の円へ →AIの心にあたる部分が、人間との関わりを経て学習点を増やしていく様子を表現しています。
AI“P”→Person(人)の欠けた部分を表しています。
白い直線が円の外側の三角に伸びている →人間の欠けた部分を吸収してAIが成長していく様子を表したデザインです。左上のかけらに敢えて線を伸ばさないことで、「AIの学習が完遂することはなく、人間と関わり続ける限り学び続ける」ことを示しています。
制作時間 1時間
架空ロゴ
AI技術の会社『株式会社AIP』の企業ロゴデザイン
制作時間:1時間
名刺デザイン①
- STUDIO MUの名刺デザイン
音楽スタジオ=バンドマンが使う場所というイメージを払拭するために丸いフォントと明るい色味を使用しました。
NAKA『YA』に色をつけ、ナカ『タニ』ではないことを分かりやすく印象付けています。(名刺交換時の話題作りにも)
住所情報のみ標準的なゴシック体を使いメリハリを持たせました。
制作時間 8時間
架空名刺
コンセプトのある名刺デザイン
制作時間:8時間
名刺デザイン②
- Shinsei株式会社の名刺デザイン
住まいの契約という重要な転機を安心して預けていただけるよう、安らぎのイメージがある緑色を基調にしました。
担当者の電話番号などをメモしやすいよう、表面は意識して余白を多めにしました。
ほかの契約書類や資料に名刺が紛れてしまわないよう、端に緑色のラインを施しました。
裏面には企業イメージを表す新緑をデザインしました。
制作時間 6時間
架空名刺
実用性を考えた名刺デザイン
制作時間:6時間
バナー①
- 女性向けファッション通販サイトのホリデーセール広告
ポップでキュートな商品を多く取り扱うファッション通販サイト
10代~20代の女性
「ポップでキュートなものが好きな人」にターゲットを絞り、ピンポイントに訴求すること
デザインインパクトと視覚的効果を重視した広告にするため、テキストは最小限としました。
3D効果のベベルでボタンのようなデザインにし、押したくなる(目に留まる)効果を持たせました。
制作時間 8時間
架空バナー
女性向けファッション通販サイトの広告
制作時間:8時間
バナー②
- 学生向けメンタルヘルスシンポジウムの広告
目に留まるデザインを意識した中高生向けの広告
中学1年生~高校3年生
若い世代へ向けて、型にハマらないデザインで目を引くこと
デザイン悩みを抱える高校生へ向けつつも、重い印象にはならないようポップな色合いとデザインにしました。
心を“知る”ことで“守る”というキャッチコピーを最大限引き立たせるデザインにしました。
紙を一枚破ったようなデザインで現状の打破をイメージしています。
制作時間 4時間
架空バナー
学生向けメンタルヘルスシンポジウムの広告
制作時間:4時間
バナー③
- ECサイトのスプリングセール広告
春を感じさせる爽やかなセール広告
新生活を迎える20代(主に新社会人)
情報を明確に伝え、ターゲット層へ購買を促進すること。
デザイン「フリーのイラスト素材を上手に使う」という自己課題を持って制作しました。
春=ピンクで女性っぽいデザインになりやすいため、空を見上げたようなデザインにすることで桜色一色になるのを避けました。
空色を一色にするとのっぺりしてしまうため、グラデーションで濃淡と太陽光を表現しました。
制作時間 4時間
架空バナー
ECサイトのスプリングセール広告
制作時間:4時間
バナー④
- ECサイトのスプリングセール広告(期間後半に掲出するバージョン)
当初のターゲット層以外にも向け、“急遽”広告を打ち出すことになったという設定
20代~40代の女性
“新生活”に小さなライフイベントも含め、広い層へ向けて(中でもファミリー層へ向けて)アプローチをすること
デザイン自己課題として、「販促の都合で急遽ターゲット層を広げることになった」という状況を想定しました。スピード感を持って制作するためにテキスト情報メインの広告とし、シンプルながらも目の引かれるレイアウトを目指しました。
水色×桜色のフレッシュな配色から、緑色×桜色の少し落ち着いたカラーリングへ変更しました。 緑色は若葉=新生活のイメージも持たせています。
シンプルな分、目に留まりやすいよう付箋のオブジェクトやページがめくれたようなデザインを施しました。
制作時間 2時間
架空バナー
ECサイトのスプリングセール広告(期間後半バージョン)
制作時間:2時間
ポスター①
- 都市伝説をテーマにしたホラー系の展示会
少し不気味なホラー系ポスター
ホラーが好きな20代~40代
「ホラーは苦手だから公共の場で目にしたくない」という人を守りつつも、ターゲット層へアピールできるようなデザインで訴求すること
デザイン魔の棲む場所と言われる辻(十字路)、逢魔が時や警告色を想起させる朱色、「その他の危険」を表す交通標識などを施しました。
人から人へ伝播する都市伝説の特色を表現しています。
メインビジュアルからはみ出した交通標識とポスター全体にかかる人影で怪異の日常への侵食を表しました。
制作時間 6時間
架空ポスター
ホラー展示イベント『都市怪異展』のポスター
制作時間:6時間
ポスター②
- スクールカウンセラーによるこころの講演会のポスター
学校の廊下に掲出される学生向けのポスター
高校1年生~3年生(在籍生)
校内の生徒へ向けてイベントを知らせること、悩んでいる生徒が「参加してみよう」と思えるようなアプローチをすること
デザインペンツールの機能を知り、使いこなすことを自己課題として制作しました。
淡い水色×白色でメディカル的配色にしています。
内面的な悩みを抱えた状態を透明人間のようなビジュアルで表現し、ペンツールを用いて描きました。
透明人間のようなビジュアルには『これから何者にもなれる』という前向きな意味も込め、棒立ちではなくやや動きのあるデザインとしました。
制作時間 4時間
架空ポスター
『真名来高校』校内講演会のポスター
制作時間:4時間
Adobe Photoshop
コラージュ作品①
- Photoshop制作第1回目作品
好きなものを詰め込んだ衣装
Photoshopの機能を知り、使いこなす練習として制作しました。
ブルーが好き、綺麗なものが好き、という気持ちを詰め込みました。
トルソー部分のみでは無機質な印象になるため、動きをつけることで華やかな印象をプラスしました。
制作時間 6時間
コラージュ
コラージュ作品①
制作時間:6時間
コラージュ作品②
- Photoshop制作第1回目作品
絵画作品
PhotoshopのAI生成機能を使う練習として制作しました。
ユリの花をモチーフにし、花のイラスト・背景イラストをAI生成して組み合わせました。
画面により透明感と動きを与えるために、テキストの下へ図形のオブジェクトを配置しました。
制作時間 2時間
コラージュ
コラージュ作品②
制作時間:2時間
レタッチ①
- Photoshoレタッチ練習作品
修復ツールを用いて手動でレタッチをしました。
制作時間 2時間
レタッチ
レタッチ作品①
制作時間:2時間
レタッチ②
- Photoshoレタッチ練習作品
手動でレタッチを行ったあと、AI生成塗りつぶし機能を用いて消去部分を描画しました。
制作時間 2時間
レタッチ
レタッチ作品②
制作時間:2時間
GIF作品①
- Photoshopのアニメーション作成機能を使った制作です。
お汁粉を内側から飲み干してしまう小さなアザラシのGIFアニメーションです。ブラシツールを用いて描画しました。
制作時間 2時間
GIF
GIF作品①
制作時間:2時間
GIF作品②
- Photoshopのアニメーション作成機能を使った制作です。
星が瞬く夜空のGIFアニメーションです。フリー素材の写真をピクセルアート風に加工し、星形のブラシツールで瞬く星々を描画しました。
制作時間 2時間
GIF
GIF作品②
制作時間:2時間
バナー①
- 学習塾の夏期講習バナー
塾に通っていない高校生へ向けた夏期講習の受講促進バナー
大学進学を目指す高校生とその保護者
「この夏から始める」ということを印象付け、無料体験への参加を促進すること
デザイン爽やかな印象に仕上げるため、写真の色調を明るく整えました。また、キャッチコピーが一部見にくくなっていたため、色の濃いサッシと鉛筆は個別に覆い焼きをして明るくしました。
人物の目線の先に『マナ塾』を配置し、広告を見た方の視線が自然に塾名へ向くようデザインしました。
青と黄色は学習塾の広告でよくある配色のため、特に保護者の方が一目で「塾の広告だ」と認識できるようにしました。
保護者へ向けたアピールポイントは「無料体験」とし、アクセントのある黄色で目立つようにしました。
勉強をしている学生の写真を用い、前向きな文言をキャッチコピーにすることで、今夏の勉強について意識できるようデザインしました。
制作時間 4時間
架空バナー
学習塾『マナ塾』の夏期講習バナー
制作時間:4時間
バナー②
- 学習塾の4月入学バナー
新年度入塾生募集と入学金0円キャンペーンのバナー
大学進学を目指す高校生とその保護者
新年度の入塾生募集開始をお知らせし、キャンペーン期間中の入塾を促進すること
デザイン写真の桜色を鮮やかにするために、また白色のテキストの視認性を上げるために、桜色の領域と黄色の領域は個別に色調を調整しました。
人物の目線の先に『マナ塾』を配置し、広告を見た方の視線が自然に塾名へ向くようデザインしました。
新年度の始まりをイメージした桜色を引き立たせるために、テキストのほとんどを白色にしました。
入塾金0円キャンペーンは保護者へ向けたアピール部分のため、メインビジュアルとは明確に領域を分けました。
制作時間 4時間
架空バナー
学習塾『マナ塾』の4月入学バナー
制作時間:4時間
バナー③
- 新商品『まつ毛美容液serumy』の広告
マイナーブランドの新商品広告
20~30代女性
「マイナーなブランドだから」と敬遠されないよう、安心感を与えて購買を促進すること
デザイン「満開に咲く花のように自まつ毛を盛れる」というコンセプトの化粧品であるため、花の写真とキャッチコピーでその印象を打ち出しました。
商品イメージを表すため、『清らかな心』という花言葉のあるカスミソウ・『優美』という花言葉のあるコスモスの写真を使いました。
下部のピンク色を右へ向けて先細りさせることで、『詳細はクリック』へと視線誘導ができるようにしました。
制作時間 2.5時間
架空バナー
新商品『まつ毛美容液serumy』の広告
制作時間:2.5時間
バナー④
- 真名文庫『いない母親』バナー小説
“バナー漫画”ならぬ“バナー小説”
小説が好きな人、ホラーが好きな人
漫画の宣伝を目的とした所謂“バナー漫画”の小説版として、本が好きな方へ向けて小説作品をアピールすること
デザインバナー漫画のようにイラストで目を引くことができないため、テキストだけで引き込まれるよう加工を施しました。
文章の場面を表す実写画像に砂嵐のかかったブラウン管テレビのような加工をし、恐ろしい雰囲気が脳裏に浮かぶデザインに仕上げました。
制作時間 2.5時間
架空バナー
真名文庫『いない母親』バナー小説
制作時間:2.5時間
ポスター①
- バンド『PAKUTASO AC』の1stライブを告知するポスター
メディアに顔を出していないバンドのライブポスター
ライブハウスに来る10~30代の男女 (コアターゲットは10~20代男性)
ファンへワンマンライブの開催をお知らせするとともに、まだバンドのことを知らない方へ向けてチケットの購買を促進すること
デザイン色味の異なる各写真を、主にチャンネルミキサーを使い一つ一つ色調補正をしました。
中心を飾るバンド名は写真に馴染みつつも最も目立つようにデザイン・加工を施しました。
下部のテキストはシンプルなゴシック体とジャンプ率で可読性を意識しました。
制作時間 7時間
架空ポスター
バンド『PAKUTASO AC』のライブポスター
制作時間:7時間
ポスター②
- お笑いコンビ『にほんアドベンチャー』の単独ライブを告知するポスター
ポップでおしゃれな単独ライブポスター
10~30代のお笑いファン
ファンへ単独ライブの開催をお知らせするとともに、『にほんアドベンチャー』のファンではないお笑いファンへ向けてもチケット購買を促進すること
デザイン『にほんアドベンチャー』というコンビ名にちなみ、赤と白のツートンカラーをメインとしました。
キレ芸が売りのボケ(写真左)と冷静なツッコミ(写真右)というコンビのため、曲線的なオブジェクトと角のあるオブジェクトを散りばめました。
「全然キレてないですよ」とキレながら言う定番のボケが今回の単独ライブ名(という設定)であるため、そのセリフが聞こえてきそうな躍動感のあるデザインにしました。
制作時間 2時間
架空ポスター
お笑いコンビ『にほんアドベンチャー』のライブポスター
制作時間:2時間
Webサイト
レスポンシブ未対応
各ページのサンプル画像をご覧いただけます
- TOP
- LIVE
- NEWS
- PROFILE
- MOVIE
- CONTACT
Webサイト制作①
- バンド『Drift-Spark』の公式サイト
ユーザーが情報を得やすいようになるとともに、サイト自体がバンドの宣伝になること
ターゲットバンドのファン、出演依頼を検討している音楽関係者
UIミュージシャンの公式サイトが閲覧される主な場面を以下のように分析し、それらに基づいて設計しました。 ①『ファンが最新情報を得るため』 →流動的な情報をトップページへ掲載し、ユーザーが簡潔に必要情報へ到達できるようにしました。 ②『音楽関係者がライブ等の出演者を検討する・もしくは出演を依頼するため』 →フッターをSNSリンクとCONTACTページへのアクセスのみに絞ることで、導線を明確にしました。
デザインサイトのメインビジュアルとして楽曲MVを埋め込むことでバンドの特色を表現するとともに、宣伝的意味合いも持たせました。 ユーザビリティの観点から、音声はデフォルトでoffの設定にしています。
情報の整理と簡潔化を第一とし、装飾やアニメーションはシンプルなものにしました。
メインビジュアルの楽曲MVも自主制作物です。
制作時間 3日
架空Webサイト
バンド『Drift-Spark』の公式サイト
制作時間:3日
トップページのみ
レスポンシブのサンプル画像をご覧いただけます
- PC表示
- タブレット表示
- スマートフォン表示
Webサイト制作②
- フラワー通販サイト『Ordinary』トップページ
『カスタムオーダー』という独自サービスをアピールするとともに、サイトの離脱率を下げること
ターゲット20~40代(特に“推し活”をしている方がコアターゲット)
UI離脱率の大きな要因を『求めているものがサイトのどこにあるか分からない』ことであると分析し、それを解消する設計を意識しました。 ①グローバルナビゲーションには小カテゴリまで載せ、サイト内のマップを明確に ②サイトトップのスライドバナーへリンクを設置し、主要コンテンツへの導線を簡潔化 ③取り扱い商品について『通常アイテム』と『独自サービスの“カスタムオーダー”』という二つに大きく区分けすることで、入口を明確に
デザイン花屋らしい柔らかい雰囲気にしつつも、女性的なイメージを持たせすぎないよう配色はナチュラルな色合いにしました。
アピールしたい『カスタムオーダー』の口コミをサイト下部へ掲載しInstagramへのリンクを設置することで、購買を促進しています。
制作時間 3日
架空Webサイト
フラワー通販サイト『Ordinary』トップページ
制作時間:3日
トップページのみ
レスポンシブのサンプル画像をご覧いただけます
- PC表示
- タブレット表示
- スマートフォン表示
Webサイト制作③
- 地域密着型の広告代理店『ライク広告社』コーポレートサイトトップページ
北海道で広告代理店を探しているお客様の目に留まり、会社のアピールができること
ターゲット北海道で広告代理店を探している法人のお客様、または個人のお客様
UIトップページに情報を集め、企業の特色・アピールポイントが伝わりやすい設計にしました。
各所へリンクを設置することで、お客様が更なる詳細情報へアクセスしやすいようにしました。
強調する部分へスクロールイベントでマーカーを引き、テキスト情報にアクセントをつけています。
デザイン地元愛の伝わるメインビジュアルと『message』がサイト内で最も目立つようにしました。
誠実さが伝わるよう統一感のあるレイアウトにし、カラーリングもシンプルなものにしました。
単調で堅い印象を与えすぎないようアニメーションを豊富に使い、手書き風のイラストを差し込むことで遊び心も感じられるようにしました。
制作時間 3日
架空Webサイト
広告代理店『ライク広告社』のコーポレートサイトトップページ
制作時間:3日
合同作品
レスポンシブのサンプル画像をご覧いただけます
- トップページ - PC表示のみ
- 生きもの紹介 - PC表示
- タブレット
- スマートフォン
Webサイト制作④(合同制作)
- 水族館『まなクルAQUA WORLD』の公式HP
職業訓練校でのグループワーク作品です。私が制作を担当したのは下記エリアです。 ①トップページ - メインビジュアル(動画制作を含む) ②トップページ - お知らせエリア ③トップページ - 右から左へ流れる画像のエリア ④生きもの紹介 - 全て(ヘッダー・フッターを除く)
UI 生きもの紹介多くの情報を扱うページになるため、長くなりすぎないようタブでの切り替え表示を採用しました。
お子様やファミリー層のお客様が閲覧することを想定して、広域にコンテンツを広げ動きのある画面を作り、飽きの来ない設計にしました。
デザイン 生きもの紹介トップの波打つような水色から地続きの背景色にすることで、海の中にいるようなイメージをデザインしています。
紹介テキスト部分は少し無機質なデザインにし、図鑑的な印象を持たせて大人も楽しめるようにしました。
制作時間 4日
架空Webサイト
水族館『まなクルAQUA WORLD』の公式HP
制作時間:4日
レスポンシブ未対応
各ページのサンプル画像をご覧いただけます
- スクショ
- ノート
Webサイト制作⑤
- 職業訓練校での5か月間の授業をまとめたサイト
サイト制作の練習も兼ねて、職業訓練校での授業を自主的に日々まとめていました。 スクリーンショットとテキストファイルを紐づけて掲載しているため授業で学んだ知識を引き出しやすく、在籍中の制作には大いに役立ちました。
今後もアップデートを続け、Webデザイナーとしての技術の保管庫にしていくつもりです。
制作時間 5か月
自主課題Webサイト
職業訓練校 授業まとめ
制作時間:5か月
Contact
Thank you!
お問い合わせ
ご連絡は下記メールアドレス宛てにお送りいただけますと幸いです。