noguchinoguchi

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

noguchinoguchi

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

最近の記事

Zoom_基本操作

Zoomとは Web会議・ビデオ会議やチャットがオンラインでできるリモートツール 映像・音声通話・画面共有機能・チャット・データファイル共有

    • Windows11_基本操作

      ●起動(PCの電源を入れる) モニター&本体 別型PC:モニターと本体にある「電源ボタン」を軽く押す 基本的に周辺機器から電源を入れ最後に本体の電源を入れる 一体型ノートPC:「電源ボタン」を軽く押す >ログインパスワードを入力して「Enter」か「→」をクリック ●アプリの終了 ウインドウの右肩の「×」をクリック またはファイル>終了 ●終了(PCの電源を切る) ディスプレイ&本体 別型PC・一体型ノートPC 共通: アプリケーション(以後アプリ)は全て終了する

      • 色の基礎知識

        色の三属性色相・彩度・明度について RGBとCMYK主にデバイスモニターで扱うデータはRGB、印刷物はCMYKで制作 https://color.adobe.com/ja/create/color-wheel

        • Illustrator_文字の設定

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

        Zoom_基本操作

          figma | プロトタイプ制作

          「始める」か「無料で始める」をクリックしてアカウントを作成します 次からはログインかダウンロードしたアプリからfigmaを起動します 01_introスターター(無料)プランではチームは「3つのFigmaファイル」、下書きには「無制限」にファイルが作成できる 基本的にデータはクラウド保存 画像(.png)・PDF・figmaデータ(.fig)としてローカル保存できる ●デザインファイル:「下書き」か「チーム名」を選択してボタンを押してデザイン制作用のファイルを制作 ●Fi

          figma | プロトタイプ制作

          デザインについて考える

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

          デザインについて考える

          Illustrator | 基本設定

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

          Illustrator | 基本設定

          Adobeソフト | キー操作_1

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

          Adobeソフト | キー操作_1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

          ボックスモデルの考え方

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

          ボックスモデルの考え方

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

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

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

          WebのためのPhotoshop

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

          WebのためのPhotoshop