記事一覧
事業会社の新卒デザイナーが内定者インターンで学んだことと反省
こんにちは。株式会社ココナラで内定を頂き、2024年春の正式入社に先立ち、現在インターンとして活動しているデザイナー、やなしんと申します。来年の入社を控えていましたが、早期に実務経験を積むためにインターンとしての職務を開始し、現在に至るまで8ヶ月間、様々なプロジェクトに従事しています。この文章では、これまでの経験から得た学び、自身の成長に対する反省点、そして今後のキャリアに向けた目標について述べた
もっとみる
Material Design コンポーネントまとめてみた Bottom sheets編
Bottom sheets探してみた
ボトムシートは、画面下部に固定されたセカンダリー・コンテンツを表示する。
□ 公式に書かれていること
⚡コンパクトサイズとミディアムサイズウインドウにボトムシートを使用
標準とモーダルの2種類
⚡コンテンツはアプリのメインコンテンツではないこと
⚡ボトムシートがメインの画面コンテンツや機能に干渉しないように、ユーザーが必要な時に閉じたり、非表示にすること
Material Design コンポーネントまとめてみた Search編
Search探してみた
検索では、キーワードまたは語句を入力して関連情報を取得できます。
□ 公式に書かれていること
⚡ユーザーが入力すると、検索バーにキーワードやフレーズの候補が表示されます。
⚡常に検索ビューに結果を表示する
⚡ユーザーは検索バーまたは検索ビューのテキスト フィールドにクエリを入力すると、関連する結果が表示されます。
*「クエリ」はユーザーが検索を求める際に入力するキー
Material Design コンポーネントまとめてみた Radio button編
ラジオ ボタンを使用すると、一連のオプションから 1 つのオプションを選択できます
□ 公式に書かれていること
⚡リストから項目を 1 つだけ選択できる場合は、ラジオ ボタン (スイッチではなく) を使用します。
⚡ラベルのテキストが視覚的に明確で、ユーザーが簡単に目で追いやすい
⚡選択されたアイテムは、選択されていないアイテムよりも目立ちます
□ よくある使い方と特徴
ユーザーがオプショ
Material Design コンポーネントまとめてみた Progress indicators編
Navigation railをプロセスのステータスをリアルタイムで表示します
□ 公式に書かれていること
⚡プロセス（ロードなど）のすべてのインスタンスに同じ進行状況インジケーターを使用する
⚡直線と円形の2種類
⚡決して装飾として使用しないでください
⚡動きを通して注目を集める
□ よくある使い方と特徴
Progress indicatorsは、アプリの読み込み、フォームの送信、更新の
Material Design コンポーネントまとめてみた Navigation rail編
Navigation railを使用すると、中型デバイス上の UI ビューを切り替えることができます
PC
Navigation rail探してみた！
使用方法□ 公式に書かれていること
⚡3 ～ 7 の遷移先とオプションの FAB を含めることができます
⚡アプリの異なる画面であっても、railは常に同じ場所に配置します
□ よくある使い方と特徴
レールは、3 ～ 7 個のアプリの宛
Material Design コンポーネントまとめてみた Navigation drawer編
Navigation drawerを使用すると、PCなどの大型デバイス上の UI ビューを切り替えることができます
PC
Navigation drawer探してみた！
使用方法□ 公式に書かれていること
⚡拡張レイアウトではナビゲーション ドロワーを使用し、コンパクトおよびミディアム レイアウトではモーダル ナビゲーション ドロワーを使用します
⚡デフォルトで開いたり閉じたりできます
⚡
Material Design コンポーネントまとめてみた Navigation bar編
Navigation barを使用すると、デバイス上の UI ビューを切り替えることができます
iOS
Menus探してみた！
使用方法□ 公式に書かれていること
⚡ 同じ重要度の遷移先を 3 ～ 5 つ含めることができます
⚡目的地は変わりません。これらはアプリ画面間で一貫している必要があります。
⚡以前はボトム ナビゲーションという名前でした
□ よくある使い方と特徴
ナビゲーショ
Material Design コンポーネントまとめてみた Menus編
メニューは一時的な表面に選択肢のリストを表示します
iOS
Menus探してみた！
使用方法□ 公式に書かれていること
⚡ メニューを使用してアイテムをスキャン可能な方法で表示する
⚡メニューを開いたり、閉じたり、選択したりしやすくする
⚡メニューは、アイコン ボタンやテキスト フィールドなどのさまざまなコンポーネントから開くことができます
□ よくある使い方と特徴
メニューを使用する
Material Design コンポーネントまとめてみた Lists編
Listsは関連するデータ群を縦方向に一列に整列させて表示するUI要素です
iOS
Lists探してみた！
使用方法□ 公式に書かれていること
⚡ リストを使用すると、ユーザーが特定の項目を見つけてそれに基づいて行動できるようになります
⚡リスト項目を論理的な方法 (アルファベット順や数字順など) で並べ替えます。
⚡アイコン、テキスト、アクションを一貫した形式で表示する
□ よくある使
Material Design コンポーネントまとめてみた Divider編
Dividerはリストまたは他のコンテナ内のコンテンツをグループ化する細い線です。
iOS
Divider探してみた！
使用方法□ 公式に書かれていること
⚡ Dividerは、コンポーネントを視覚的にグループ化し、階層を作成する方法の 1 つです。ネストされた親子関係を暗示するために使用することもできます。
⚡ディバイダには 2 つのタイプがあります。
⚡全幅とはめ込み
□Full w
Material Design コンポーネントまとめてみた ダイアログ編
ダイアログはユーザに特定のtaskを知らせる。重要な情報やユーザの意思決定、複数のtaskを含んでいてもよい。
iOS
ダイアログ探してみた！
使用方法□ 公式に書かれていること
⚡ ダイアログを使用して、ユーザーが情報に基づいて行動できるようにする
⚡基本画面と全画面画面の 2 種類
⚡単一のタスクを完了することに専念する必要があります
⚡タスクに関連する情報も表示できます
⚡進行状況の
Material Design コンポーネントまとめてみた 日付ピッカー編
日付ピッカーを使用すると、日付または日付の範囲を選択できます
iOS
日付ピッカー探してみた！
使用方法□ 公式に書かれていること
⚡ 日付ピッカーは過去、現在、または将来の日付を表示できます
⚡現在の日や選択した日など、重要な日付を明確に示します
⚡3 つのタイプ: Docked date picker,Modal date picker,Modal date input
□ よくある
Material Design コンポーネントまとめてみた チップス編
チップスは、人々が情報を入力し、選択し、コンテンツをフィルタリングし、アクションをトリガーするのに役立ちます
iOS
チップス種類別に探してみました
アシストチップ＝ホーム画面からカレンダー イベントを開くなど、複数のアプリにまたがるスマートまたは自動化されたアクションを表します。
フィルターチップ=フィルター チップは、タグまたは説明的な単語を使用してコンテンツをフィルターします
入力
Material Design コンポーネントまとめてみた チェックボックス編
チェックボックスを使用すると、ユーザーはリストから 1 つ以上の項目を選択したり、項目をオンまたはオフにしたりできます。
iOS
チェックボックス探してみました！
検索を分類するときや設定の時に使用されているのが多い感じでした！
使用方法□ 公式に書かれていること
⚡ リストから複数のオプションを選択できる場合は、(スイッチやラジオ ボタンの代わりに) チェックボックスを使用します。
⚡チ
Material Design コンポーネントまとめてみた カルーセル編
カルーセルは複数の画像などのコンテンツを左右に移動して切り替えられる。
iOS
Material Designに準拠したカルーセルはあまりなかったです。なぜだろう
使用方法□ 公式に書かれていること
⚡ カルーセルは水平方向にスクロールします
⚡ 画像やビデオなどの視覚的なアイテムと、オプションのラベル テキストが含まれています。
⚡️項目はさまざまな幅にすることができ、スクロールすると幅