サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
アメリカ大統領選
chot.design
5-1. プロトタイプを作成する UIデザインUXデザインプロトタイピングFigmaではプロトタイピング機能を使用することで、リンクや画面遷移をつけたプロトタイプを作ることができます。このレッスンではプロトタイプを作成する方法を解説していきます。 公開日：2019/09/15最終更新日：2021/09/15 1.プロトタイプとは 図1 プロトタイプ プロトタイプは、制作したUIを実際に近い形でデザインを確認することができるものです。実装前に問題点の洗い出しや、さまざまな概念をテストしたりと、作業の後戻りを防ぐことができます。 このレッスンでは、プロトタイピングの設定や使い方について説明していきます。 2.画面をプロトタイプモードに切り替えるプロトタイプを作るには、プロパティパネル上部の図2赤枠の「Prototype」を押しプロパティモードを変更します。 図2 プロトタイプ プロトタイプを表
3-9. テキストの配置「ポイントテキスト」と「エリア内テキスト」の使い分けUIデザインUXデザインAdobe XDのには、ポイント（インライン）テキスト、エリア内テキストという２種類の「テキスト」があります。それぞれの配置方法や特徴について説明します。 公開日：2019/07/22最終更新日：2019/07/28 1.ポイントテキストの使い方テキストツールにて、カンバス・アートボード上で「クリック」してテキスト入力を開始すると、ポイントテキストになります。 自動で改行されることはなく、文字を入力するほど行は長くなっていきます。 下部のハンドルを上下すると、文字サイズを拡大・縮小できます。この時、行送りも自動で調整されます。 キャッチコピー、キャプションなどの短い文字列を配置するのに適しています。 2.エリア内テキストの使い方テキストツールにて、カンバス・アートボード上でカーソルをドラッグ
3-6. 配色のルールデザインの考え方Webデザイン、グラフィックデザイン、プレゼン資料作成など様々な場面で色を選ぶ作業が発生します。配色にもある程度ルールがあり、ルールを知っていれば短時間でバランスのいい色選びができるように。このレッスンでは配色に関する基本的な考え方について解説します。 公開日：2019/12/22最終更新日：2021/01/28 1.配色の考え方色を選ぶ時は、カラーホイール（色相環）を使って色の組み合わせを考えていきます。 色数が増えるほどバランスを取るのが難しくなるので、色数は3色程度に制限したほうがいいでしょう。 相性の良い色を組み合わせても、色の配分がおかしかったり、無計画にたくさんの色を使用するとデザイン自体がまとまりのない印象を与えることになります。 配色のコツは、色数を絞り使う色の割合をきちんと決めることです。 2.色の配色比率「70：25：5の法則」一般
UI/UXデザインの定番ツールと言えば「Sketch」。このカリキュラムではSketchの基本的な使い方を学びながら、スマホアプリのデザインについて学ぶことができます。
制作会社、ベンチャー、CCO、起業、スタートアップ…多様なデザインキャリアを経験した、リーディングプレイヤーの生き様 成長は、自ら“絞り出す”もの。手を挙げて機会を掴む ──D＆Experiment上谷真之 公開日：2020/05/11最終更新日：2020/05/11 「成長がとまることへの『恐怖心』に常に駆り立てられているんです」 D&Experiment代表の上谷真之さんは自身のキャリアをこう振り返ります。 新たな経験や、より難度の高い仕事を求め続け、制作会社やスタートアップ、起業と経験を重ねてきた上谷さん。現在は複数社のスタートアップを支援しながら、若手人材の育成にも力を入れています。 “成長機会”を求め続けてきたキャリアを紐解き、成長し続ける上で求められるマインドセットを伺いました。 1.人よりも数年遅い“はじまり”が、成長を志す原動力に学生時代、バンド活動に熱中した上谷さんは、卒
3-4. コンポーネント化UIデザインUXデザインプロトタイピングコンポーネントとはパーツをまとめて再利用できる形にしたものです。このレッスンではFigmaのコンポーネント機能について解説します。 公開日：2019/08/14最終更新日：2021/07/29 1.コンポーネントとはコンポーネントとは、デザイン全体で再利用できるUIの部品のことを言います。例えば、ボタン、アイコン、モーダルなどです。 複数の画面に渡って同じUI部品があるとき、元となるコンポーネントを編集すると、全てのUI部品に修正内容を反映することができるため、作業の効率化とアプリ全体の統一性を保つことができます。 2.コンポーネントを作成するショートカットキー：(Command+Option+K) Figmaのコンポーネントを作成する方法は、選択しているオブジェクトから、メニューバー中央に位置する図1の赤枠のアイコンをクリ
1-2. 初期設定とインストールFigmaを利用する為に必要なアカウント登録、アプリのインストール、日本語の有効化について説明します 公開日：2019/04/19最終更新日：2021/01/28 1.アカウントを作るFigmaを利用するにはアカウント登録が必要です。有料版もありますが、ほとんどの機能は無料でも利用できます。 オフィシャルサイト(https://www.figma.com/)にアクセスし、「Try Figma for free」からアカウント登録します。 メールアドレスとパスワードを入力するとアンケートが表示されるので、名前と役職を回答しましょう。これらの情報は後から変更もできます。 「Create Account」をクリックして、アカウントの作成は完了です。編集画面が表示され、チュートリアルが始まるので「Next」をクリックします。2枚目でチームを作成するよう推奨されますが
WordPress（ワードプレス）は世界で最も利用されているサイトが多いCMS（コンテンツマネジメントシステム）です。このカリキュラムではWordPressの開発環境づくりから、管理画面の使い方、オリジナルテーマの作り方、プラグインの紹介など、WordPressでのサイト制作が一通り学べる内容になっています。
未経験から、制作会社、起業、事業会社CDOとキャリアを積んできた学びの軌跡 思想と技術、アウトプットとインプットを行き来する学びを——プレイドCDO鈴木健一未経験から制作会社でのエンジニア、デザイナーを経験し、その後FICCなどを経て、2014年に自らデザインファームSTANDARDを立ち上げた鈴木健一さん。 現在は、STANDARD時代のクライアントだった株式会社プレイドにジョイン。CDOとして活躍しています。情報源の少なかった時代からインターネットが成熟した現在まで、鈴木さんはどのように学びを積み重ねたのか。その軌跡を伺いました。 公開日：2020/01/26最終更新日：2020/01/28 鈴木健一 株式会社プレイド CDO（Chief Design Officer） マークアップエンジニア、Webデザイナーを経て、2006年より株式会社エフアイシーシーにてブランドサイトのWebデザ
Adobe XDはWebサイト・モバイルアプリ・音声UIなど様々なデバイス向けにデザインとプロトタイプを作成することができるソフトウェアです。XDを使ってアプリのUIデザイン作成にチャレンジしてみましょう。
1-1. Figmaの概要UIデザインUXデザインプロトタイピングデザインの共同制作から共有まで、チーム作業に強いUIデザインツール『Figma』について紹介します。実際にどんなシーンで活用されているのか、Figmaを利用するメリットとデメリットについても解説します。 公開日：2019/04/19最終更新日：2021/01/28 1.Figmaって何？Figmaは2016年9月に正式リリースされたUIデザインツールです。 リリースの時点でデスクトップアプリケーションだけではなく、ブラウザでもデザインの作成が可能な点で革新的でした。Windows, Mac, Linux やChromebookといろいろなOSに対応したアプリケーションが提供されています。 また、リアルタイムにコラボレーションできるデザインツールとして徐々に人気が出てきています。 インターフェースは全て英語ですが、徐々に日本で
これからデザイナーを目指す人も、ノン・デザイナーの方も、現役のデザイナーの方も。デザインとは何か？デザインの基礎知識とは？そしてどうやってデザインを考えればよいのか解説します。
chot.designを使ってデザインを学びましょう！このサイトの使い方や、Webデザイン・UI/UXデザインにまつわる仕事内容の紹介、デザイナー転職のコツなど。
リアルタイムで共同編集ができる新しいデザインツールとして注目を浴びる「Figma」について学べるカリキュラムです。チームでアプリやWebサービスを作っている現場におすすめ。
2-3. UI/UXデザイナーを目指す人向けおすすめの勉強法UIデザインUXデザイン未経験からUI/UXデザイナーを目指す人に向けて、おすすめの勉強法を解説します。当サイト内のレッスンだけでなく、独学する際のコツ、参考の本なども紹介します。 公開日：2019/05/08最終更新日：2021/01/28 1.UI/UXデザイナー、未経験からでも大丈夫？「未経験からでもUI/UXデザイナーになれますか？」と質問されることがあります。その答えはもちろん「YES」です。 しかし、何もしないでUI/UXデザイナーになれるわけではありません。ツールの使い方や制作の流れを勉強して何かを作れるようにならなければ、会社で働いたり依頼を受けて仕事をすることはできません。 またWebデザイナーに比べると求人の数も少ないため、ハードルは若干上がります。 では、どうやってスキルを身に着けていけば良いのでしょうか？
1-2. VSCodeでSassをコンパイルする方法とオプションの設定方法HTML・CSS1-1. 『Sassって何？Sassの基本知識と利用方法』でVSCodeを使ったSassのコンパイル方法を解説しましたが、このレッスンではより詳しく使い方とオプションの設定方法を解説します。 公開日：2019/06/08最終更新日：2019/06/08 1.VSCodeに拡張機能「Live Sass Compile」をインストールするVSCodeでSassをコンパイルするには、「Live Sass Compile」という拡張機能のインストールが必要です。 VSCodeの拡張機能のインストールは、左側にある6つのアイコンの中の下から2つ目を選択し、表示された検索入力欄にインストールしたい拡張機能の名前を入力します。インストールしたい拡張機能が見つかったら、インストールボタンをクリックします。 インストー
長谷川恭久さんが語る、「決まりきった働き方や概念」が存在しない時代のデザイナー像 「エンパシー能力を高めよ」——長谷川恭久が若手デザイナーに伝えたいことアメリカの大学でWebに出会い、20年以上Web領域のさまざまなデザインに携わる長谷川恭久さん。デザイン会社への就職や下積み期間などは未経験。独立を選び、自分らしく道を切り開いてきました。 そんな長谷川さんは、これまでどのように自身のキャリアを築き、第一線で歩みを進めてきたのでしょうか。そのキャリア観と合わせて、若手デザイナーが成長角度を上げる上で考えるべきことを伺いました。 公開日：2019/09/29最終更新日：2019/09/30 長谷川恭久 UI/UX Designer デザインやコンサルティングを通じてWebの仕事に携わる活動家。 アメリカの大学にてビジュアルコミュニケーションを専攻後、マルチメディア関連の制作会社に在籍。日本に帰
デジタルプロダクト時代のデザイナーに求められる、キャリアとデザイン観を聞く デザイナーは学び続ける仕事。THE GUILD三古達也が制作会社・事業会社を渡り歩き手にした姿勢Clear、エウレカ、DENDESIGN、BASE、THE GUILD……。制作会社・事業会社を渡り歩き、2019年1月に独立した、デザイナー三古達也さん。20代にして、多くのデザイナーが選択に悩む岐路を次々と経験し、常に成長を志向してきました。彼はどのようにデザインを学び、意思決定を重ね、現在の場所までたどり着いたのでしょうか。 デジタルプロダクト時代のデザイナーとして、身軽かつ鋭い選択を続けてきた三古さんに、これまでのキャリアと、デザインの学び方について伺いました。 公開日：2019/07/30最終更新日：2019/08/21 三古 達也 UI/UX Designer THE GUILD Member / bond
SassとはCSSを効率よくコーディングするためのメタ言語（拡張言語）です。プログラムのように変数や関数を使って、効率よく保守性の高いコードを記述することができます。
Webサイトは「HTML」という文章の構造を組み立てるマークアップ言語と、装飾やレイアウトを指定するための「CSS」という言語で作られています。Webデザイナーにとって非常に重要なスキルである「HTML・CSS」の使い方を解説します。
毎日ちょっとずつ、デザインを学ぼう毎日ちょっとずつデザインを学ぼうIT/Web業界のデザイン学習サイト
このページを最初にブックマークしてみませんか？
『chot.design - 毎日ちょっとずつデザインを学ぼう』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
