記事一覧
色の基礎知識
色の三属性色相・彩度・明度について
RGBとCMYK主にデバイスモニターで扱うデータはRGB、印刷物はCMYKで制作
Illustrator_文字の設定
文字詰め：文字と文字の間、字間の調整について
いい感じに詰めてくれる
プロポーショナルメトリクス：1文字単位の詰め情報で自動的に文字の字間を詰める設定（欧文部分には無い）
カーニングの中の設定と併用
メトリクス：フォント内情報を参照に詰める設定
オプティカル：ソフト側で文字形で自動で詰め（メトリクスの無い場合に）
和文等幅：和文は等幅（詰め無し）、欧文はメトリクス
（良）メトリクス＋プロポー
figma | プロトタイプ制作
「始める」か「無料で始める」をクリックしてアカウントを作成します
次からはログインかダウンロードしたアプリからfigmaを起動します
01_introスターター（無料）プランではチームは「3つのFigmaファイル」、下書きには「無制限」にファイルが作成できる
基本的にデータはクラウド保存
画像(.png)・PDF・figmaデータ(.fig)としてローカル保存できる
●デザインファイル：「下書
デザインについて考える
仕事でも仕事でなくても
WebサイトやSNS、パンフレットやチラシにPOPなど 何か制作物をPCで作る機会が増えました
デザインすると言うとものすごくハードルが高くなりますが、伝えたい情報を相手に届けて、より良く理解してもらうためと思うと取りかかりやすくなるのではないでしょうか
ここでお話しするのは自己表現のためのアートではありません
あくまで情報をちゃんと伝えたい相手に意図する形で理解してもら
Illustrator | 基本設定
最初に…
Illustratorでどのような物を制作するかによって設定が変わってきます
出来るだけ用途にあった設定にしましょう
新規ドキュメント印刷
カラーモード：CMYK
ラスタライズ効果：高解像度（300ppi）
モバイル・Web・フィルムとビデオ・アートとイラスト
カラーモード：RGB
ラスタライズ効果：スクリーン（72ppi）
↑この最初の新規ドキュメントの設定で関わっている
＊ドキ
Adobeソフト | キー操作_1
01_introPhotoshopは画像加工ソフト
写真・画像の加工やレタッチ（色調補正や修正）・Webサイトのデザインカンプやバナー等の制作にも使用します
ショートカットキーは操作の時短におすすめです
主なキー操作（Adobeソフトほとんど共通）shiftキー：水平垂直・15° 45° 90° 縦横比の固定 追加選択（選択解除）
option(alt)キー：コピー・中心から図形をく・＋マウス
おすすめの写真&イラストDLサイト
基本的に、商用利用可能な著作権フリー・ロイヤリティフリーの無料の写真素材がダウンロードできるサイト
＊それぞれ詳細な規約のサイトもあるので要確認でお願いします！
● ODANいくつもの写真ダウンロードサイトをまとめて写真が検索できるサイト
すごく便利！
● Unsplash無料で利用可能な高解像度写真ダウンロードサイト（ODANに含まれる）
おしゃれな写真が多いですが海外の写真がメイン
●
Macの基本操作 | よく検索する順
スクリーンショット：
⌘ ＋ shift ＋ 3（画面全体）
⌘ ＋ shift ＋ 4（ドラッグして範囲を設定）
⌘ ＋ shift ＋ 4 ＋ spaceバー長押し（ウインドウのみ／カメラマークでクリック）spaceバーは最後に押す
⌘ ＋ shift ＋ 5（画面収録）
検索：フォルダ・書類データが見つからない
⌘ ＋ F ：検索ウインドウが開く 検索窓にデータ名
（開いているウインドウの
リモートワーク | おすすめツール
テレワーク・リモートワーク：会社以外の場所で働くこと全般
テレワーク「tele（離れた）」と「work（働く）」
リモートワークは「remote（遠隔、遠く離れた）」と「work（働く）」
を組み合わせた造語
一般にはほとんど同義、あえて違いを挙げるとすると、リモートワークには「チームで協力し合い仕事をする」という意味も含むと言われてます
コロナ禍で加速しましたが、最近は原則、出勤・出社の以前の
おすすめのWebギャラリーサイト
Webデザインの制作をする時のおすすめギャラリーサイト
↓おすすめ順に並んでます
＊個人的な趣味や感想・見解ですー
ギャラリーサイトもいっぱいあってどれを見ようか悩みますよね☆
本当ただの好み順ですが 「オシャレで沢山」より、UI/UXが分かりやすい方が「探しやすい」「そんなタグ（カテゴリー）で検索もありか」という基準で並べてます
● URAGAWA | 制作会社がわかるWEBデザイン・参考サ
Web制作の仕事について | 基礎知識
Web総合概論
Web関連の仕事をしたいと思っている方に向けて、概要や基礎知識をざっくりまとめました
00_Web業界の理解と就職のための情報収集IT業界：information technology 通信・情報技術や情報セキュリティなどを取り扱う業界（通信インフラ[下部構造]・ソフト&ハードウェア・Web業界も含まれる）
Web業界：World Wide Web Webサイト制作（コーディング
ボックスモデルの考え方
HTML＆CSSを図解 （オリジナル見解）ボックスモデルとはMDN↓の考え方です（書いてること英訳とはいえ難しいですよね★）
この概念からわかりやすく個人的見解でボックスモデルを図にしました
HTMLについて
まずはHTMLについて そもそもMarkupをボックスに入れる（箱「タグ」詰め）と考えます
ボックスモデルの考え方
ボックスモデルはタグが表示される時にそれぞれの特性が適用され、C
プロトタイプ制作 | ポートフォリオ
01_構成を考えるまず最初に構成を考え、必ずコンテンツ（内容）を取捨選択しましょう！
後からコンテンツを増やす、入れ替える はコードが崩れる原因に★
コードを書きながら内容を考えるのはかなりの上級者
そのためにもデザインカンプの時点で構成をしっかり考えておきましょう
◯ 論理的（ロジカル）→ 重要度の高い要素からユーザーの目につく
X 感覚的（フィーリング）→ 見た目でなんとなく・内容が伝わら
WebのためのPhotoshop
内容の修正をして更新予定です
Photoshopのレイヤーの種類は大きく7つ
通常レイヤー：ピクセル画像レイヤー
背景レイヤー：透明部分の無いロックされた通常レイヤー
テキストレイヤー：文字
シェイプレイヤー：ベクターデータを扱う
調整レイヤー：色調補正などを非破壊編集できる
スマートオブジェクトレイヤー：元画像のピクセル情報を保持
塗りつぶしレイヤー：ベタ塗り・グラデーション・パターン
保
解像度 | Webデザインの新規ドキュメントの設定
新規ドキュメントの設定について（Ps・Ai・Xd・figma…）
2023年日本国内シェア
●デスクトップPC画面
No.1 → Web大（1920×1080px） No.2 → Web一般（1366×768px）
●モバイル画面（Androidは多種多様）
No.1 → 390×844px No.2 → 375×667px No.3 → 375×812px
No.1 ＝ No.2＋No.
JavaScriptとjQueryについて（図）
詳しい内容（プログラミング言語）についてではなく、htmlに実装するためのまとめを図にしたものです
※この資料のすべての文章・画像等の内容の無断転載及び複製等の行為はご遠慮ください