1.文字を作成する
ツールバーから文字ツールを選択します。
文字ツールで入力
2.テキストに縁取り効果をつける
レイヤーパネルからテキストを入力したテキストレーヤーをダブルクリック
3.レイヤースタイルのパネルが表示されるので、境界線の項目をクリックしてチェックを入れてください。
右側のプレビューにチェックを入れていると、リアルタイムでレイヤースタイルの変更を確認できます。
真ん中の項目から縁取りのサイズや色、位置などを変更できます。
また、縁取りの塗りつぶしタイプを、色以外にグラデーションやパターンに変更することもできます。
4.完成
〇文字組を始める前に確認するポイント
・文章の量はどれくらいか
・文章の流し込みに使えるスペースはどれくらいか
・縦組みにするか、横組みにするか
・文章を入れることを考えたデザインレイアウトになっているか
〇基本のテキストのボックスを作る揃え方は3パターン
一般的には四角のテキストボックスを作っておき、文章を流し込みます。
・基本の揃え方は「右揃え・中央揃え・左揃え」
テキストエリアボックスを作り文章を入れ込んだ後に必ず、「行間」と「行長」、そして「文字サイズ」のバランスを確認
レイアウトと同じように、文章も基本的な揃え方は「右揃え・中央揃え・左揃え」の3パターンになります。
一般的には、横組みの場合は右揃え、縦組みの場合は左上から揃えていくのが一般的
illustratorなどの「文字組み機能」を使って、テキストエリアボックスを作り、文章を流し込む。
〇Webデザインで文章やテキストのレイアウトを考える注意点
・文字サイズやmarginなどで、大体の文字幅を考えておく
・改行タグを多く入れすぎない。一文を長くしすぎない。
・スマホとPCで文字サイズや行間の見え方が変わるので確認。
〇文章の揃え方も基本はレイアウトと同じ3パターン
原則として、縦書きと横書きは混同させない
文字サイズと行間、行長のバランスを必ず確認する
文章がうまく揃わないときは「禁則処理」の設定を見なす
Webデザインには5つの基本レイアウトがあります。
・シングルカラムレイアウト
・マルチカラムレイアウト
・グリッドレイアウト
・ブロークングリッドレイアウト
・ノングリッドデザイン
パーツをすべて1列で構成したレイアウトです。
「1カラム」とも呼ばれます。
ヘッダーからフッターまでが上から順番に並んでいるもっともシンプルなレイアウト
パソコンやスマホ色々な端末で見てもほとんど同じレイアウトで表示されるのが特徴
複数の列を使ったレイアウトパターン。
シングルカラムレイアウトよりも、コンテンツを一覧で多く配置する方法
一目で多くの情報を得られるため、ニュースメディアのような回遊性をユーザーに提供するようなサービスで多く使われるのが特徴
それぞれの要素をグリッド状（格子）に分割して並べることで、美しく整えられた印象のデザインを作る方法です。
グリッドデザインやグリッドシステムとも呼ばれます。
情報を整理して見せられるレスポンシブデザインとの相性が良く、更新性にも優れているなどの特徴から、Webサイトのレイアウトとしてもよく使われる。
規則性のある境界線をポイントであえて外したデザイン方法です。
通常のグリッドレイアウトは、一味違った印象的でオリジナリティーを出しやすいのが特徴
背景にあるブロックからはみ出したり、位置を外して配置していたりします。
ブロークングリッドレイアウトよりもさらに崩したデザインが特徴です。
ブロークングリッドレイアウトがずらす・重ねる技法を使うのに対して、ノングリッドレイアウトはより開放感のあるデザインといえるでしょう。
写真やテキストが折り重なるように配置されていたり、不規則なサイズのテキストが配置されたりします。
Hex（16進数カラーコード）、RGB、CMYK、DICやPANTONEなどの色を、簡単に変換、検索ツール
https://syncer.jp/color-converter
https://www.dic-graphics.co.jp/products/dcguide/
https://www.pantone.com/color-finder
https://colorcodesearch.com/
Webサイトには以下の４つの作成方法があります。
ブログサービスとは、ブログを作成・管理する機能を提供しているサービスです。
代表的なサービスとしては、Amebaやライブドアブログが挙げられます。
ブログサービスは、ブログの機能に特化することでシンプルで簡単に利用できるのが特徴です。
ユーザ登録後、あらかじめ用意されたWebサイトのテンプレートから好みのデザインを選択します。
メリット:簡単にWebサイトが作れる
デメリット:ブログサービスは自由度がなく、カスタマイズができない
Webサイト作成サービスは、Webサイトを作成・管理する機能を提供しているサービスです。
代表的なサービスとしては、Jimdo・Wix・FC2ホームページなどがあります。
Webサイト作成サービスであれば、ブログでは対応できないページの追加や構成の変更にも対応できるため、簡単なコーポレートサイトやショップサイトなどに利用可能です。
一部のサービスでは、ネットショップに対応できるものもあります。
メリット:比較的簡易でありながらブログで対応できないWebサイトも作成できる
デメリット:デザインや機能が自社の希望に合わなかった場合には、修正・変更ができない
WordPressは、ホームページを作成するためのオープンソースの無料ソフトです。
利用者が多いため書籍やサイトも多数存在し、学習しやすいのが特徴
また、デザインのテーマも無数に公開され、機能やデザインが優れたものも多数存在
PHP・HTML・CSS等の言語知識があれば自身でテーマを編集し、細かくカスタマイズすることもできます。
さらに、ユーザ権限を管理する機能を持つため、サイト全体の管理者・記事執筆者・デザイン変更者などさまざまな担当者を登録し、それぞれに権限を持たせることが可能
WordPressを利用する場合にはサーバとドメインを自社で用意する必要があります。
メリット:自由にカスタマイズができ、自社の希望に即したWebサイトを作成できる
デメリット:PHPやHTMLなどのある程度のコーディングの知識が必要となる
HTMLやCSS、JavaScripなどの言語を用いてコードを書き込み、サーバー上にアップロードすることでWebサイトを作成する手法です。
Webサイトを作成する上での最も基本的な手法であり、一番柔軟に思い通りのサイトを作成することができます。
ただし、HTML・CSS・JavaScriptの言語知識が必要
テキストエディタという無料のソフトのみで作成できますが、Webサイトを公開する際にはWordPressと同様にサーバ・ドメインを準備する必要があり。
メリット:Webサイトを一から作り上げるため、自社の希望通りのサイトを作成できる
デメリット:最も難易度が高くコーディングの深い知識が求められ、Webサイト全体のコーディングをしなければならず時間がかかり、運用時のメンテナンスも自社内で実施しなければならない
Webデザイン・DTPデザイン・グラフィックデザインの違い
| 種類 | 媒体 |
|---|---|
| Webデザイン | Webサイト |
| DTPデザイン | 印刷物 |
| グラフィックデザイン | 印刷物など、視覚に訴えかける表現全般 |
WebデザインはWebサイトのデザインをします。
DTPデザインとグラフィックデザインの違い
両者とも、広告やパッケージといった印刷物のデザインを行う点は同じですが、グラフィックデザイナーはDTPデザイナーのように印刷用データを作ったり、製版作業を行ったりはあまりしません。
「DTPオペレーター」とは、グラフィックデザイナーが作成したデザインを印刷用データに変換する作業を行う人のことをいいます。
自分でデザインをすることはありません。
印刷会社には、一般的にグラフィックデザイナーとDTPオペレーターの両者が存在することになりますが、現在では両方を兼務している方も多いため「DTPデザイナー」という言葉が生まれました。
また、DTPデザイナーは印刷用データを作成する必要があるためPC操作能力が必須ですが、グラフィックデザイナーは必ずしも制作物をPCで作成する必要はありません。
視覚に訴えかける表現全般を制作するのがグラフィックデザイナーです。
Webデザイン作成するときに参考にできるサイト
https://maneru-design-lab.net/page/2
商用OKでクレジット表記不要のサイト
https://undraw.co/illustrations
https://www.ac-illust.com/
無料会員だと、検索できる回数が1日5回までで、1日にダウンロードできる数も決まっているため注意
1.Adobe Color CC
https://color.adobe.com/ja/create/color-wheel/
世界中のAdobeユーザーが投稿した配色パレットが閲覧・利用できるため、デザイナーはまずチェックしたい便利なツールです。
iPhoneやiPadではAdobe Captureという名前のアプリで利用できます。 外出先で撮影したものから配色を作って同期できます。
2.Happy Hues
https://www.happyhues.co/
画面左に並んだ配色パレットをクリックすると、その配色をフラットデザインに反映させたサイト全体のサンプルがレビューできるサービスです。
背景やマウスホバーなど、実際にサイトコンテンツ内に反映させた場合のサンプルがさっとチェックできる
3.ColorDrop
https://colordrop.io/
豊富な4色の配色パレットを集めた、シンプルで使いやすいツールです。
配色パレット・写真からの抽出・グラデーションツール・ソートやフィルタリングなど機能が充実。
4.Pigment
https://pigment.shapefactory.co/
2色の配色をさらに調整できるため、こだわりたい人におすすめ。
5.Color Supply
https://colorsupplyyy.com/app/
補色や類似色、3色または4色の配色を探せるツールです。
6.Nippon Colors
https://nipponcolors.com/
日本の伝統的な色を探せるサイトです。
7.Colorable
https://colorable.jxnblk.com/
背景と文字色のコントラストを、アクセシビリティとして適切かどうかの判断ができるツールです。