noguchinoguchi

デザイン会社を経て、パンフレットや雑誌・Webサイトなどの幅広い媒体でデザインを制作し…

noguchinoguchi

デザイン会社を経て、パンフレットや雑誌・Webサイトなどの幅広い媒体でデザインを制作しています。人と関わり、サポートする仕事に興味を持ち、現在は講師業にも携わっています。その過程でまとめた資料を上げてます。参考になれば嬉しいです。

Illustrator_文字の設定

文字詰め：文字と文字の間、字間の調整について いい感じに詰めてくれる プロポーショナルメトリクス：1文字単位の詰め情報で自動的に文字の字間を詰める設定（欧文部分には無い） カーニングの中の設定と併用 メトリクス：フォント内情報を参照に詰める設定 オプティカル：ソフト側で文字形で自動で詰め（メトリクスの無い場合に） 和文等幅：和文は等幅（詰め無し）、欧文はメトリクス （良）メトリクス＋プロポーショナルメトリクス （不可）オプティカル＋プロポーショナルメトリクス（詰まり過ぎ

noguchinogu…

    • figma | プロトタイプ制作

      01_introスターター（無料）プランではチームは「3つのFigmaファイル」、下書きには「無制限」にファイルが作成できる 基本的にデータはクラウド保存 画像(.png)・PDF・figmaデータ(.fig)としてローカル保存できる ●デザインファイル：「下書き」か「チーム名」を選択してボタンを押してデザイン制作用のファイルを制作 ●Figjamボード：ホワイトボードのような自由なページ制作 ●インポート：PDFなどのファイルを開くことができる ●ファイル名の変更や削除

      noguchinogu…

      • デザインについて考える

        仕事でも仕事でなくても WebサイトやSNS、パンフレットやチラシにPOPなど　何か制作物をPCで作る機会が増えました デザインすると言うとものすごくハードルが高くなりますが、伝えたい情報を相手に届けて、より良く理解してもらうためと思うと取りかかりやすくなるのではないでしょうか ここでお話しするのは自己表現のためのアートではありません あくまで情報をちゃんと伝えたい相手に意図する形で理解してもらうのが目的です 読めること・理解してもらうことが重要 参考サイト　■Adob

        noguchinogu…

        • Illustrator | 基本設定

          最初に… Illustratorでどのような物を制作するかによって設定が変わってきます 出来るだけ用途にあった設定にしましょう 新規ドキュメント印刷 カラーモード：CMYK ラスタライズ効果：高解像度（300ppi） モバイル・Web・フィルムとビデオ・アートとイラスト カラーモード：RGB ラスタライズ効果：スクリーン（72ppi） ↑この最初の新規ドキュメントの設定で関わっている ＊ドキュメント設定 ＊環境設定 の設定が変わってきます！

          noguchinogu…

        Illustrator_文字の設定

        noguchinoguchi

          Adobeソフト | キー操作_1

          01_introPhotoshopは画像加工ソフト 写真・画像の加工やレタッチ（色調補正や修正）・Webサイトのデザインカンプやバナー等の制作にも使用します ショートカットキーは操作の時短におすすめです 主なキー操作（Adobeソフトほとんど共通）shiftキー：水平垂直・15° 45° 90°　縦横比の固定　追加選択（選択解除） option(alt)キー：コピー・中心から図形をく・＋マウスホイール（ズーム） スペースキー：手のひらツール（画面をドラッグ） コマンド(c

          noguchinogu…

          Adobeソフト | キー操作_1

          noguchinoguchi

          おすすめの写真&イラストDLサイト

          基本的に、商用利用可能な著作権フリー・ロイヤリティフリーの無料の写真素材がダウンロードできるサイト ＊それぞれ詳細な規約のサイトもあるので要確認でお願いします！ ● ODANいくつもの写真ダウンロードサイトをまとめて写真が検索できるサイト すごく便利！ ● Unsplash無料で利用可能な高解像度写真ダウンロードサイト（ODANに含まれる） おしゃれな写真が多いですが海外の写真がメイン ● pixabay無料で利用可能な高解像度写真ダウンロードサイト（ODANに含まれる

          noguchinogu…

          おすすめの写真&イラストDLサイト

          noguchinoguchi

          Macの基本操作 | よく検索する順

          スクリーンショット： ⌘ ＋ shift ＋ 3（画面全体） ⌘ ＋ shift ＋ 4（ドラッグして範囲を設定） ⌘ ＋ shift ＋ 4 ＋ spaceバー長押し（ウインドウのみ／カメラマークでクリック）spaceバーは最後に押す ⌘ ＋ shift ＋ 5（画面収録） 検索：フォルダ・書類データが見つからない ⌘ ＋ F ：検索ウインドウが開く　検索窓にデータ名 （開いているウインドウの🔍虫眼鏡マーク検索窓でも） データ名が分からないときは「＋」マークを押して種類や

          noguchinogu…

          Macの基本操作 | よく検索する順

          noguchinoguchi

          リモートワーク | おすすめツール

          テレワーク・リモートワーク：会社以外の場所で働くこと全般 テレワーク「tele（離れた）」と「work（働く）」 リモートワークは「remote（遠隔、遠く離れた）」と「work（働く）」 を組み合わせた造語 一般にはほとんど同義、あえて違いを挙げるとすると、リモートワークには「チームで協力し合い仕事をする」という意味も含むと言われてます　 コロナ禍で加速しましたが、最近は原則、出勤・出社の以前の就業形態に戻りつつあるようです　 リモートツールのメリット・デメリットテレワー

          noguchinogu…

          リモートワーク | おすすめツール

          noguchinoguchi

          おすすめのWebギャラリーサイト

          Webデザインの制作をする時のおすすめギャラリーサイト ↓おすすめ順に並んでます ＊個人的な趣味や感想・見解ですー ギャラリーサイトもいっぱいあってどれを見ようか悩みますよね☆ 本当ただの好み順ですが　「オシャレで沢山」より、UI/UXが分かりやすい方が「探しやすい」「そんなタグ（カテゴリー）で検索もありか」という基準で並べてます ● URAGAWA | 制作会社がわかるWEBデザイン・参考サイト集 このギャラリーサイト自体のUXデザインも最近の感覚！デザインのみに寄り過

          noguchinogu…

          おすすめのWebギャラリーサイト

          noguchinoguchi

          Web制作の仕事について | 基礎知識

          Web総合概論 Web関連の仕事をしたいと思っている方に向けて、概要や基礎知識をざっくりまとめました 00_Web業界の理解と就職のための情報収集IT業界：information technology　通信・情報技術や情報セキュリティなどを取り扱う業界（通信インフラ[下部構造]・ソフト&ハードウェア・Web業界も含まれる） Web業界：World Wide Web　Webサイト制作（コーディング・システム開発・アプリケーション開発）・Webサービス（Webブラウザで閲覧する

          noguchinogu…

          Web制作の仕事について | 基礎知識

          noguchinoguchi

          ボックスモデルの考え方

          HTML＆CSSを図解 （オリジナル見解）ボックスモデルとはMDN↓の考え方です（書いてること英訳とはいえ難しいですよね★） この概念からわかりやすく個人的見解でボックスモデルを図にしました HTMLについて まずはHTMLについて　そもそもMarkupをボックスに入れる（箱「タグ」詰め）と考えます ボックスモデルの考え方 ボックスモデルはタグが表示される時にそれぞれの特性が適用され、CSSで装飾する時に動きが異なり　ブロック・インラインボックスにCSSが効く効かな

          noguchinogu…

          ボックスモデルの考え方

          noguchinoguchi

          プロトタイプ制作 | ポートフォリオ

          01_構成を考えるまず最初に構成を考え、必ずコンテンツ（内容）を取捨選択しましょう！ 後からコンテンツを増やす、入れ替える　はコードが崩れる原因に★ コードを書きながら内容を考えるのはかなりの上級者 そのためにもデザインカンプの時点で構成をしっかり考えておきましょう ◯ 論理的（ロジカル）→ 重要度の高い要素からユーザーの目につく X 感覚的（フィーリング）→ 見た目でなんとなく・内容が伝わらない ほとんどのWebサイトの１番の目的は「情報を伝えること」 参考）コンセ

          noguchinogu…

          プロトタイプ制作 | ポートフォリオ

          noguchinoguchi

          WebのためのPhotoshop

          内容の修正をして更新予定です Photoshopのレイヤーの種類は大きく7つ 通常レイヤー：ピクセル画像レイヤー 背景レイヤー：透明部分の無いロックされた通常レイヤー テキストレイヤー：文字 シェイプレイヤー：ベクターデータを扱う 調整レイヤー：色調補正などを非破壊編集できる スマートオブジェクトレイヤー：元画像のピクセル情報を保持 塗りつぶしレイヤー：ベタ塗り・グラデーション・パターン 保存と書き出しの違い保存は「今のデータの形式」や「レイヤー等が保持され、後で編集で

          noguchinogu…

          WebのためのPhotoshop

          noguchinoguchi

          解像度 | 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.3　なので幅375[Retina高精細750(@2x)か1125(@3x)]px

          noguchinogu…

          解像度 | Webデザインの新規ドキュメントの設定

          noguchinoguchi

          JavaScriptとjQueryについて（図）

          詳しい内容（プログラミング言語）についてではなく、htmlに実装するためのまとめを図にしたものです ※この資料のすべての文章・画像等の内容の無断転載及び複製等の行為はご遠慮ください

          noguchinogu…

          JavaScriptとjQueryについて（図）

          noguchinoguchi

          Adobe XD | プロトタイプ制作

          01_introAdobe XDは、ワイヤーフレーム / プロトタイプ / Webサイトデザイン / スマホアプリ / ＊　 SNS画像 プレゼン資料等をデザイン制作するのに最適な機能が備わった便利なUI/UXの作成ツール　クライアントやチームでも個人でも共有・編集ができる＊　PsやAiとの連携が容易 プロトタイプ：試作品の意味　実際のコーディングやプログラミングの前に画面（ページ）遷移やアニメーションなどの動作検証（どのように動くか）を確認し、問題点が無いかチェックするた

          noguchinogu…

          Adobe XD | プロトタイプ制作

          noguchinoguchi