mizuki (@amam_design) 's Twitter Profile
mizuki

@amam_design

未経験からデザイナー就職めざして活動中📚

ID: 1762973435096109056

calendar_today28-02-2024 22:50:39

162 Tweet

64 Takipçi

207 Takip Edilen

mizuki (@amam_design) 's Twitter Profile Photo

デザイン実践|バナー制作 デイトラの過去お題から制作。 ターゲットはコスト意識の高い20代(大学生・新社会人)。「とにかく安く使いたい」「SNSや動画を快適に見たい」と思っている人と仮定して制作。 #SNS広告 #バナー制作

デザイン実践|バナー制作
デイトラの過去お題から制作。
ターゲットはコスト意識の高い20代(大学生・新社会人)。「とにかく安く使いたい」「SNSや動画を快適に見たい」と思っている人と仮定して制作。
#SNS広告 #バナー制作
mizuki (@amam_design) 's Twitter Profile Photo

📑作業記録|WEBサイトFV(ファーストビュー)のレイアウト検討 ターゲットに「パッと見て何を印象づけたいか」を意識。 また、ヘッダーやボタンの位置はユーザーが迷わないように、“個性のない配置”に。 ⚫︎ サービスの世界観を直感的に伝える ⚫︎ 伝えたい内容に優先順位をつける 比較検討。

📑作業記録|WEBサイトFV(ファーストビュー)のレイアウト検討
ターゲットに「パッと見て何を印象づけたいか」を意識。
また、ヘッダーやボタンの位置はユーザーが迷わないように、“個性のない配置”に。
⚫︎ サービスの世界観を直感的に伝える
⚫︎ 伝えたい内容に優先順位をつける
比較検討。
mizuki (@amam_design) 's Twitter Profile Photo

🍰デザイン実践|recipi16 「真上からの構図をデザインに活かす」 俯瞰の構図は“客観的に商品を見せられる”メリットがある反面、引いた印象になりがち。 そこで、タルトの図形的な部分をレイアウトに活かすことで、画面にリズム感をだすことができる。 #デザインアイデア図鑑

🍰デザイン実践|recipi16
「真上からの構図をデザインに活かす」
俯瞰の構図は“客観的に商品を見せられる”メリットがある反面、引いた印象になりがち。
そこで、タルトの図形的な部分をレイアウトに活かすことで、画面にリズム感をだすことができる。
#デザインアイデア図鑑
mizuki (@amam_design) 's Twitter Profile Photo

📸デザイン実践|recipi20 写真のは位置は内容を活かすように心がける。 動作に合わせ上下に写真を配置することで、見る人に上下の写真の関係性やストーリーを届けることができる。 上下の写真が一つの塊として見えるよう、周りの枠やテキスト配置を行っている✍️ #デザインアイデア図鑑

📸デザイン実践|recipi20
写真のは位置は内容を活かすように心がける。
動作に合わせ上下に写真を配置することで、見る人に上下の写真の関係性やストーリーを届けることができる。

上下の写真が一つの塊として見えるよう、周りの枠やテキスト配置を行っている✍️
#デザインアイデア図鑑
mizuki (@amam_design) 's Twitter Profile Photo

デザイン実践|架空バナー制作 デイトラの過去のお題から制作。 ターゲットは「従業員評価を効率化したい20〜40代の経営者層」。 青と黄色を基調に、信頼感と行動を促すコントラストを演出。 #SNS広告 #バナー制作

デザイン実践|架空バナー制作
デイトラの過去のお題から制作。
ターゲットは「従業員評価を効率化したい20〜40代の経営者層」。
青と黄色を基調に、信頼感と行動を促すコントラストを演出。
#SNS広告 #バナー制作
mizuki (@amam_design) 's Twitter Profile Photo

✨デザイン実践|recipi10 「空間を活かしてスッキリと見せる」 余白を効果的に使い、シンプルで洗練された印象に。 ロゴの雰囲気に合わせた書体を選ぶことで、紙面全体に統一感を持たせる。 #デザインアイデア図鑑

✨デザイン実践|recipi10
「空間を活かしてスッキリと見せる」
余白を効果的に使い、シンプルで洗練された印象に。
ロゴの雰囲気に合わせた書体を選ぶことで、紙面全体に統一感を持たせる。
#デザインアイデア図鑑
mizuki (@amam_design) 's Twitter Profile Photo

note更新|Webサイト制作過程 イベントのWebサイト制作に向けて、実際のイベントへ足を運び、現地で感じたこと・考えたことなどをまとめました✍️ note.com/amamdesign/n/n…

mizuki (@amam_design) 's Twitter Profile Photo

📖デザイン実践|recipi11 「視線の動きを考える」 書店で飾られるポスターを想定して制作。 写真の位置を“始点”として、視線の流れを意識したレイアウトに。 余白を広く取りつつ、文字の大きさや配置で情報の優先度を整理。 #デザインアイデア図鑑

📖デザイン実践|recipi11
「視線の動きを考える」
書店で飾られるポスターを想定して制作。
写真の位置を“始点”として、視線の流れを意識したレイアウトに。
余白を広く取りつつ、文字の大きさや配置で情報の優先度を整理。
#デザインアイデア図鑑
mizuki (@amam_design) 's Twitter Profile Photo

💍デザイン実践|recipi9 「センター揃えを使った安定感のあるレイアウト」 今回は指輪が主役になるようなレイアウト センター揃えのレイアウトは文字のレイアウトに左右のガタツキがあると、視線の妨げになり、まとまりのないレイアウトになる場合があるので注意が必要。 #デザインアイデア図鑑

💍デザイン実践|recipi9 
「センター揃えを使った安定感のあるレイアウト」 
今回は指輪が主役になるようなレイアウト   

センター揃えのレイアウトは文字のレイアウトに左右のガタツキがあると、視線の妨げになり、まとまりのないレイアウトになる場合があるので注意が必要。
#デザインアイデア図鑑
mizuki (@amam_design) 's Twitter Profile Photo

デザイン実践|バナー制作 デイトラの過去お題から制作。 ターゲットはAIやデータ分析に関心のある20〜30代ビジネスパーソンと仮定して制作。 #SNS広告 #バナー制作

デザイン実践|バナー制作
デイトラの過去お題から制作。
ターゲットはAIやデータ分析に関心のある20〜30代ビジネスパーソンと仮定して制作。
#SNS広告 #バナー制作
mizuki (@amam_design) 's Twitter Profile Photo

Webサイト制作にあたり、書籍『マーケティング実践講座』を参考に、バリューの整理・LP構成・キャッチコピー案などを考えました。その実践メモをnoteにまとめました✍️ note.com/amamdesign/n/n…

mizuki (@amam_design) 's Twitter Profile Photo

📱アプリ模写|気づき一部抜粋✍️ ・画像が見切れている。 →左右にスワイプできることを直感的に伝えるため? ・情報の区切りに線を使わず、塗りや余白で整理されている。 → 線がないことで視線が分散せず、写真に自然と集中できるように? #UIデザイン #アプリ模写

📱アプリ模写|気づき一部抜粋✍️
・画像が見切れている。 
→左右にスワイプできることを直感的に伝えるため?

・情報の区切りに線を使わず、塗りや余白で整理されている。
→ 線がないことで視線が分散せず、写真に自然と集中できるように?
#UIデザイン #アプリ模写
mizuki (@amam_design) 's Twitter Profile Photo

✨デザイン実践|recipi30 「淡い色の写真を作る」 背景をぼかし、色を浅く補正して淡くマットな質感に。 主役の人物を明るく調整し、やわらかな光を感じる印象に仕上げる。 #デザインアイデア図鑑

✨デザイン実践|recipi30
「淡い色の写真を作る」
背景をぼかし、色を浅く補正して淡くマットな質感に。
主役の人物を明るく調整し、やわらかな光を感じる印象に仕上げる。
#デザインアイデア図鑑
mizuki (@amam_design) 's Twitter Profile Photo

📱アプリ模写|気づきメモ📝 📊歩数を数字ではなく棒グラフで表示 → 日ごとの比較が直感的に理解できるようにしている?数字や情報を“読む”より“見る”で。 🔤アイコン+文字での表記 → ユーザーが素早く内容を認識できるように工夫されている? #UIデザイン #アプリ模写

📱アプリ模写|気づきメモ📝
📊歩数を数字ではなく棒グラフで表示
→ 日ごとの比較が直感的に理解できるようにしている?数字や情報を“読む”より“見る”で。

🔤アイコン+文字での表記
→ ユーザーが素早く内容を認識できるように工夫されている?
#UIデザイン #アプリ模写
mizuki (@amam_design) 's Twitter Profile Photo

📱アプリ模写|気づきメモ📝 🔤選択や編集に応じて文字が変化 (例:「編集」→「完了」) → 次の操作を自然に導くことで、ユーザーが迷わず使えるように。 🎨多数のアイコンが並んでも統一感がある → 線の太さ・サイズ・ディテールのレベルが揃っているから? #UIデザイン #アプリ模写

📱アプリ模写|気づきメモ📝
🔤選択や編集に応じて文字が変化
(例:「編集」→「完了」)
→ 次の操作を自然に導くことで、ユーザーが迷わず使えるように。

🎨多数のアイコンが並んでも統一感がある
→ 線の太さ・サイズ・ディテールのレベルが揃っているから?
#UIデザイン #アプリ模写
mizuki (@amam_design) 's Twitter Profile Photo

📱アプリ模写|気づきメモ📝 💡明るさ調整は数値入力ではなく、上下のスワイプ操作で調整可能 → 感覚的に使える設計で、直感的な操作につながっている? 🎚️横並びメニューの左右に影をつけている → 奥行きを感じさせ、自然と「スワイプできそう」と思わせる工夫? #UIデザイン #アプリ模写

📱アプリ模写|気づきメモ📝
💡明るさ調整は数値入力ではなく、上下のスワイプ操作で調整可能
→ 感覚的に使える設計で、直感的な操作につながっている?

🎚️横並びメニューの左右に影をつけている
→ 奥行きを感じさせ、自然と「スワイプできそう」と思わせる工夫?
#UIデザイン #アプリ模写
mizuki (@amam_design) 's Twitter Profile Photo

📱アプリ模写|気づきメモ📝 🔘ON・OFFを文字ではなくトグルで表現 → ワンタップで切り替えでき、直感的に状態が理解できる? 🔢上下に影と角度をつけた数字デザイン → スワイプ操作で切り替えられることを自然に伝えている? #UIデザイン #アプリ模写

📱アプリ模写|気づきメモ📝
🔘ON・OFFを文字ではなくトグルで表現
→ ワンタップで切り替えでき、直感的に状態が理解できる?

🔢上下に影と角度をつけた数字デザイン
→ スワイプ操作で切り替えられることを自然に伝えている?
#UIデザイン #アプリ模写
mizuki (@amam_design) 's Twitter Profile Photo

📱アプリ模写|気づきメモ📝 余白+角丸+影をつけることで、ボタンらしさやキーボード感を直感的に表現。 💬入力前は「テキストメッセージ・SMS」グレー表示 → 入力欄を迷わず認識できるように? 🟩入力後は「↑」が緑ボタンが、右下の押しやすい位置に表示 → 次の行動を自然に促している?

📱アプリ模写|気づきメモ📝
余白+角丸+影をつけることで、ボタンらしさやキーボード感を直感的に表現。

💬入力前は「テキストメッセージ・SMS」グレー表示
→ 入力欄を迷わず認識できるように?

🟩入力後は「↑」が緑ボタンが、右下の押しやすい位置に表示
→ 次の行動を自然に促している?
mizuki (@amam_design) 's Twitter Profile Photo

『Illustrator&Photoshopデザインの作り方アイデア図鑑』を実践した学び。レイアウト編。 改めて見本と自作を比較した気づき、“観察力の差”。 noteにまとめました✍️ note.com/amamdesign/n/n… #デザインアイデア図鑑

mizuki (@amam_design) 's Twitter Profile Photo

📱アプリ模写|気づきメモ📝 👀 似たアイコンが1画面に複数あると、操作時に混乱しやすい → 類似アイコンを同一画面に置かないことで、迷いを減らせる 💡 馴染みのないアプリで、アイコン下に文字がないと機能が直感的にわかりにくい → 複数の操作を持つアプリでは「アイコン+文字表記」あるとよい

📱アプリ模写|気づきメモ📝
👀 似たアイコンが1画面に複数あると、操作時に混乱しやすい
→ 類似アイコンを同一画面に置かないことで、迷いを減らせる
💡 馴染みのないアプリで、アイコン下に文字がないと機能が直感的にわかりにくい
→ 複数の操作を持つアプリでは「アイコン+文字表記」あるとよい