UI/UXデザインツール『Figma』入門 chot.design Figmaの概要 Figmaは2016年9月に正式リリースされたUIデザインツールです 2022年7月時点では、デザインプラットフォーム「Figma（フィグマ）」として日本語版が提供されています www.figma.com

スマホアプリをデザインする スマホアプリのデザイン スマートフォンが登場し、その中で機能するアプリを誰でも制作することができるようになりました スマホアプリ制作のプロセス ①どんなサービスにするか考えよう アプリでユーザーにどんなサービスを届け…

Webサイトをデザインする Webサイトとデザインついて 現代においてWebサイトは情報を得るために欠かせないメディアです 商品を購入したり、動画を視聴したりと様々な使い方ができるようになりました Webサイト制作のプロセス ①何を伝えたいのか、目的を明確…

フライヤーをデザインする フライヤーとは フライヤーは英語で「Flyer」と書き、飛行機などを使って空からばら撒くイメージから生まれています 今は、店舗の入り口など手にとってもらいやすい場所に配置したり、手配りするなど配布のシーンは様々です チラシ…

名刺をデザインする 名刺とは 名刺とはその人の名前や連絡先を記したカードを言います クライアント先に行った時に挨拶と一緒に渡したり、交流会などで初対面の方に渡したり、名刺が活躍するシーンは様々です 名刺制作のプロセス ①目的を明確にする 例えば、…

イラストで雰囲気を作り上げる イラストとは イラストは書籍や雑誌にある挿絵、Webサイトやアプリ等において文字情報と共にある絵のことを指します デザインは「誰かの課題解決すること」ですので、デザインにおけるイラストは課題解決を助ける情報として存…

図解を活用する 図解とは 図解とは、図形等を利用して物事をわかりやすくしたものです 図解の目的と効果 文章では理解が難しい事柄を見た人にわかりやすく説明するのが図解の目的です 図解の例 序列や階層を表現する図解 序列や階層構造を図にしたものです …

アイコンを活用する アイコンとは アイコンとは物事を記号化したものです アイコンの目的 アイコンの目的は主に プログラムや機能の役割をすぐ把握できる アプリケーションやサービスのブランドを認知させる この2点です。プログラムや機能の役割をすぐ把握…

イラストレーションとは イラストレーションとは デザインにおける「イラストレーション」とは人と情報の間を繋ぐものの一つです イラストレーションは歴史の中で様々な形態・メディアを辿りますが、この点だけは変わりありません イラストレーションの目的 …

写真を合成する 写真の合成とは 写真の合成とは、二つ以上の写真またはデザインを合わせて、一つの写真を作り出すことを言います。 写真の合成の効果 求めていたイメージの写真を生み出せる 本来だと存在しない写真を合成によって生み出すことができます 制…

写真をトリミング・切り抜きする トリミング・切り抜きとは トリミングとは写真内の余白や余分な部分をなくしデザインで必要とする部分を抽出する作業を言います 一方、切り抜きとは写真内の被写体と背景との境界線に沿って切り抜く作業を言います トリミン…

写真をモノクロにする モノクロによる効果について モノクロ写真とは白と黒による階調で表現された写真のことを指します 写真をモノクロにすることで色の情報がなくなるため、被写体の形や構図などに目が行きやすくなります モノクロの例 形をはっきり見せる…

写真から傷や汚れを取り除く 傷や汚れを取り除く役割 写真は被写体の状態や環境によって、傷や汚れなどがそのまま写真に写ってしまう場合があります それらをPhotoshop等の画像編集ソフトウェアを利用して修正することができます これにより、見た人に注目し…

写真を補正する 写真の補正とは 写真の補正とは写真の持つ色情報を調整する作業を指します Adobe Photoshop等の画像編集ソフトウェアを用いて写真を補正することができます 写真補正の目的 写真を補正する目的は見せたい対象をよりはっきりと見せるためです …

写真・画像が果たす役割について 写真とは 写真はカメラによって撮影されたものを指します デザインにおける写真の役割 伝えたいことを強める 写真を用いることで、より強くメッセージを伝えることができます 写真は目で見たものと近い像であるため、より直…

文字組みをレイアウトする 読みやすい資料やスライド、ポスターなどを作るために文字の字間や行間を整えることが大切です。 文字を読む順番・視線の流れに注意する 一般的に文章を読むときの視線の流れは、横書きの場合は左上から右下へ、縦書きの場合は右上…

文字組みの基本的なテクニック 行間や字間を調整することによっても可読性や視認性を高められます。 仮想ボディと字面 和文書体は、「仮想ボディ」といわれる正方形の中に収まる形で作られています 文字は仮想ボディいっぱいに収まっているわけではなく、「…

フォントの選び方 「視認性」と「可読性」と「判読性」 文字や文章の読みやすさは、「視認性」「可読性」「判読性」という３つの要素が関係しています。 視認性：パッと見た時に文字として認識しやすいかどうか 可読性：文章の読みやすさ（長い文章でもスラ…

タイポグラフィとは Webデザイン、グラフィックデザインなど、様々なデザインにおいて重要な要素の一つが「文字」です タイポグラフィとは タイポグラフィという用語は、大きく分けると2通りの意味で使われることが多いです 文字を読みやすく、美しく並べる…

配色のルール 配色にもある程度ルールがあり、ルールを知っていれば短時間でバランスのいい色選びができるようになります 配色の考え方 色を選ぶ時は、カラーホイール（色相環）を使って色の組み合わせを考えていきます 色数が増えるほどバランスを取るのが…

色の見え方 色の大きさ「膨張色と収縮色」 同じ大きさの物でも色によって大きく見えたり小さく見えたりするものがあります。膨張色 同じ面積でも他の色より広く大きく感じる色を膨張色といいます 収縮色 同じ面積でも他の色より狭く小さく感じる色を収縮色と…

色の持つイメージ 白色（ホワイト）の意味・イメージ 白の性質 膨張色、進出色、軽量色のイメージ効果を持っています 潔白なイメージから、清潔感や純粋なイメージを与える色です 白から連想するイメージ 清潔・無垢・潔さ・美しさ・純粋・神聖 結婚式・病院…

色彩 Web・グラフィックのデザインにとって「色」は大切な要素の一つです カラーホイール カラーホイール（The Color Wheel）は、「赤」「黄」「青」を基準とした12色をサークル上に配置したもの カラーホイールの12色 カラーホイールは、「三原色（赤、黄、…

デザインの4つの基本原則とは コントラスト 近接 整列 反復 コントラスト コントラストとは、要素に区別を付けること コントラストは、視覚的に面白さを加えたり、要素の構造に区別を付けるために最も効果的な方法です ページが平淡で無くなり、面白そうに見…

はじめてのデザイン ※必ず「chot.design」サイトで詳細を閲覧することchot.design デザインを考える前に デザインとは、ヒトのために思考し、最適な形として表現すること。つまり、誰かの課題を解決すること デザインとアートの違い デザインとアートの違い…