本日は新人Webデザイナー向けにデザインの基礎知識をご紹介したいと思います。

デザインは「目的を達成するための手段」であるというように、ただおしゃれだったり綺麗なだけだと、残念ながら、集客を上げるなどの目的を達成することはできません。
今回紹介する基礎知識はデザイナーにとって当たり前に理解できているようで、新人の方は実践に移すと忘れがちになることが多いかと思うため、復習がてら読んでいただけると幸いです。

デザインの４原則

これから紹介する４原則はレイアウトの基本原則とも呼ばれ、デザイナーでない方でも情報を整理する際に役に立ちます。

①近接
要素と要素の間隔を「まとめる」ことで情報を読み取りやすくします。
関連する情報同士をグループ化することで直感的に情報の構成を理解できるようにします。
情報がグループ化されていれば読んでもらう可能性が高くなり、覚えてもらう可能性も高くなります。
グループ化する際に、関連するものとそうでないものの「余白」に差をつけることが近接のポイントとなります。
②整列
デザインの要素の位置や大きさ、色を「そろえる」ことで、バラバラに羅列された情報が一気に見やすくなります。整列は「中央揃え」「左揃え」「右揃え」に分けられますが、どのように見せたいか目的によって使い分けると良いでしょう。整列を使用すると透明の見えない線が生まれ、「左揃え」や「右揃え」にすると見えない線がより強く見えるようになります。
一般的に日本語は左から読むため、日本語の文章の可読性を上げたいなら「左揃え」にするのがベターだと言われています。
③反復
デザイン上のある特徴、フォントや色、配置など作品上で「くり返す」という法則です。
ある特徴というのはフォント、色、罫線、フォーマット、アイコンなど様々な要素です。
要素をくり返し使うことで「一貫性」が生まれ作品に統一感が生まれます。
統一感が生まれることで視線がコントロールされ、ユーザーの目がさらに惹きつけられます。
④コントラスト
コントラストは２つの要素が異なる場合に「メリハリをつける」ことで情報を差別化させることです。
上で紹介した「近接」や「整列」と違い、あえて差別化させることでユーザーの目を惹きつけてコントラストをつけます。
コントラストをつける際は、思いきりよくサイズや色を変えてわかりやすく差をつけることがポイントです。

使用する色について

RGBカラー
Webサイトはパソコンやスマホなどのディスプレイで閲覧されるので、RGBを使ってデザインします。光の三原色であるRGBは、「レッド」「グリーン」「ブルー」の3色で構成されており、色を混ぜ合わせるほど明るい色になり白に近づいていきます。
CMYKカラー
印刷物の色を表現する際は、CMYKを使います。
「シアン」「マゼンタ」「イエロー」「キープレート」（ブラック）で構成されており、RGBとは逆で混ぜ合わせるほど暗い色になります。

印刷物を入稿する際にRGBからCMYKに変換することがありますが、CMYKをRGBに変換すると通常のRGBに比べ、くすんだ色になってしまうので注意が必要です。

本日はレイアウトについてお話ししたいと思います。
人は誘導されているものに従って目線を無意識に動かしています。
デザイナーは制作前の構成を考えてデザインすることが大切です💡

情報整理

まずは情報整理が必要です。

サイトを作成する際に
ロゴ・写真・タイトル・文章など様々な要素をつなぎ合わせていくと思いますがこの時に要素の中で優先順位を決めいていくことがとても大切です。

もちろん、サイトによって優先順位は異なるのでクライアントとの打ち合わせの際に何を一番ユーザーに目を止めて欲しいのかを理解しておくことが必要です。

情報整理の次に関係性を整理します。

例えば、キャッチコピーの下にロゴを配置すると、ユーザーにはしっかりと伝えることができません。
この場合、基本的にはコピーの下には説明文などが必要かと思われます。

優先順位と関係性を整理したら大まかな、まとまりが見えてくるはずです。
ノートに書き出すことで後に見返したり、頭の中で整理しやすくなります。

視線誘導

情報整理ができたら視線誘導を意識しながら
ワイヤーフレームを作成していきます。

こちらはインターネットで検索したらすぐにヒットするものも多いかと思われますが
・Zの法則
・Fの法則
・Nの法則
など人間の目線誘導を意識した情報が既に存在しております！
一度調べてみてください。

Zの法則で言うと
人間が左から右に流れる性質を利用しているレイアウト方法です。
知識として知っておくと頭でイメージしやすいので調べてみてください。

余白でグルーピング

ホームページをデザインする際に要素ごとに余白が違っていると思います。
これは余白を生かして情報整理されているから見やすくなっているのです。

例えば、キャッチコピーの下にテキストを置きますが
この時にコピーとテキストがスクロールするほど離れていると
結びつきがないと感じてしまい、結果何が伝えたいの分からなくなってしまいます。

できるだけ要素同士は近くに
セクションが違えば余白は開けることを意識しましょう！

まとめ

情報整理はデザインをする上でとても大切な作業です。
ここをおろそかにしてしまうとデザインの作成に時間を取られたり
ユーザーに離脱率がグッと下がってしまいます。

様々なサイトを見てどのように配置されているのかを見て、今後デザインを制作する際に
意識してみましょう！

こんにちは！エクスフィールドの新人Webデザイナーです！
本日はWEB制作をする上で、入れておくと作業の効率が圧倒的に良くなるGoogleChromeの拡張機能を３つご紹介いたします。

Page Ruler Redux

webページに表示されている画像やセクションや要素などの高さや幅、マージンなどをピクセル単位で測ることができます。

使い方は簡単です。Chromeの画面右上に表示されているPage Ruler Reduxのアイコンをクリックすると、マウスカーソルが大きな「＋」に変わり、画面上部に数値を表示するバーが表示されるます。マウスカーソルをブラウザの画面上で測定したい位置の視点で一度クリックし、そのまま測定位置の終点までドラッグしてください。

ColorZilla

Webサイトデザインをする際、ヘッダーの色使いを真似したい、この要素の色は何色だろう？など、そんな時に便利な色取得ツール「ColorZilla」を紹介します。

使い方はChromeの画面右上にあるスポイトマークのアイコンから、「Pick Color From Page」をクリックします。
するとカーソルが出てくるのでページ上で取得したい色をクリックします。取得した色は自動的にクリップボードにコピーされます。

CSS Peeper

「CSS Pepper」はWebサイト内の要素をクリックするだけで、色や幅や高さ、padding、margin、font-familyなどを一発で調べられる拡張機能です。
Page Ruler Reduxと似ていますが、CSS Pepperの方が一発で様々な情報を取得できます。

使い方はChromeの画面右上にある「P」のマークをクリックします。すると、すぐにCSS Pepperがサイトを解析して、OGP画像（SNSでシェアされる時の画像）、タイトル、bodyに設定されているfont-familyをパネルで表示してくれます。
表示されているパネルの下にある「水玉」のアイコンをクリックすることで、表示されているページに使用されている全ての色のカラーコードが表示されます。
また、要素の余白やフォントを調べる際には、起動している状態で、特定の要素をクリックします。
するとパネルに、要素のサイズや余白、フォントサイズ、要素の文字色などクリックした要素の情報が表示されます。

本日は作業の効率を上げるショートカットキーをご紹介します。
WebデザイナーはデザインをするときにAdobe製品のフォトショップかイラストレーターを使用することが多いかと思います。

フォトショップのショートカットキー

こちら、Adobe公式のサイトに掲載されいてフォトショップのショートカットキーリストです。

(引用元：Adobe公式サイト)
URL：https://helpx.adobe.com/jp/photoshop/how-to/use-shortcut-keys-for-efficiency-photoshop.html
こちらからダウンロードができるのでまだ覚えてない方はデスクにおいて覚えましょう！
こんなにもたくさんありますが・・・全てを覚えるよりも使用頻度の多いものを覚えておくことが大切です。

ショートカットキーのカスタマイズ設定方法

上記で紹介したものは初期設定のショートカットキーです
自分でもカスタマイズできるので変更したい方は設定してみましょう！

〈フォトショップカスタマイズ設定方法〉
❶編集 > キーボードショートカットとメニュー」を選択
❷設定ページが開くので変更したい箇所の動作を探して設定します
これでOK！
ぜひ試してみてください！

なぜショートカットキーを使用するのか

ショートカットキーを使用することでマウスで作業するよりも作業時間を短縮することができます。
作業時間を短縮することで他の作業ができたり、デザインを考える時間も増やすことができます！
もちろんデザインソフト以外にもエクセルや他の作業にも同じことが言えます。

この記事を活かしてぜひ効率よく作業してみてください！

Webサイトにおいて「画像を差し替えたのに変更前の画像が表示される」「CSSを追記・更新したのに表示が変わらない」などの問題がある場合、ブラウザのキャッシュによって保存されたデータが表示されている可能性があります。キャッシュを削除すると、最新の情報が表示され、問題が解決する場合があります。

「キャッシュ」とは、ブラウザなどが表示したWebサイトのデータを一時的にコンピューターに保存する機能です。
初回Webサイトを表示する際は、必要なファイルデータを全てダウンロードしながらぺージを表示します。そのデータはキャッシュとしてブラウザ内に一時保存されます。そして2回目以降同じページを表示する際は、パソコン内に保存されたデータ（画像、HTMLファイルなど）を参照するため、 ダウンロードするデータが初回アクセス時よりも減少し、すばやく表示できるのです。キャッシュの保存期間はブラウザの種類や設定によって異なります。上記の例のように、変更した内容をすぐに見たい場合はご自身でブラウザのキャッシュを削除する必要があります。
ブラウザのキャッシュ削除は、以下の手順を参照してください。

Chromeのキャッシュ削除手順

PC版
1. パソコンで Chrome を開きます。
2. 画面右上のその他アイコン をクリックします。
3. [その他のツール]  [閲覧履歴を消去] をクリックします。

4. 上部で期間を選択します。すべて削除するには、[全期間] を選択します。
5. [Cookie と他のサイトデータ] と [キャッシュされた画像とファイル] の横にあるチェックボックスをオンにします。
6. [データを消去] をクリックします。

※詳細はGoogleアカウントヘルプにてご確認ください
Android版
1.画面右上から設定をタップします。
2.プライバシーとセキュリティをタップします。
3.閲覧データの削除をタップします。
4.[キャッシュされた画像とファイル] の横にあるチェックボックスをオンにします。
5.[データを削除] をタップします。

Safariのキャッシュ削除手順


Mac版
1.メニューのSafariから環境設定を開きます。

2.環境設定ウィンドウが開いたら詳細をクリックし「メニューバーに”開発”メニューを表示」にチェックを入れ閉じます。

3.メニューに表示された開発をクリックし、「キャッシュを空にする」をクリックします。

iPad, iPhone版
1.「設定（歯車マーク）」をタップします。
2.「Safari」をタップし、「履歴とWebサイトデータを消去」をタップします。
3.「消去」をタップします。

Microsoft Edgeのキャッシュ削除手順

1.画面右上にある［・・・］ボタンをクリックします。
2.［設定］>［プライバシー、検索、サービス］を選択します。
3.［クリアするデータの選択］ボタンをクリックします。
4.時間の範囲のプルダウンメニューをクリックして「すべての期間」を選択します。
5.「キャッシュされた画像とファイル」にチェックをつけます。
6.［今すぐクリア］ボタンをクリックします。
※詳細はMicrosoftサポートにてご確認ください

Firefoxのキャッシュ削除手順

1.画面右上にあるメニューボタンをクリックします。
2.オプション（または環境設定）をクリックします。
3.ページ左側の「プライバシーとセキュリティ」をクリックします。
4.「キャッシュされたウェブページ」右側の「今すぐ消去」をクリックします。
※詳細はFirefoxサポートにてご確認ください

本日は日頃何気なくみている、サイトの配色についてお話したいと思います。

サイトを制作するにあたり、サイトのデザインは
イメージをつけるためのとても大切な要素です。

配色の基本

基本は3色使用します。
あまり使いすぎるとバランスが悪くなるので3色程度にまとめることをおすすめします。
役割はベースカラー、メインカラー、アクセントカラーです。

比率はベースカラー70%メインカラー25%アクセントカラー5%をもとに作成します。

それぞれの役割は？

ベースカラーは背景色に使用されることが多いです。

メインカラーは際立たせたい色を指します。
サイトのイメージなどによってこの色を選びます。

アクセントカラーはサイトで1番目立つ色を指します。
LPなどの広告サイトを見るとよくわかりますが、目立たせたいボタンや文字などに使用されることが多いです。

ポイント

ベースカラーは背景色に使用されることが多いため、
邪魔にならない白色、灰色などを選ぶのをおすすめします。

メインカラーはサイトのイメージとなる色なので、
ヒアリングを行い、サイトをどのように見せていきたいかでカラーを決めます。
ここはサイトによって色を使用します。

アクセントカラーはメリハリをつける色を使用します。
例えば、クリックしてほしいボタンをメインカラーと似た色にしてしまうとみてほしい部分がユーザーには届きません。
なのでここぞとばかりに目立たせましょう！
おすすめはメインカラーとは逆の色、明度や彩度に差をつけるなど工夫をすることで目立たせることができます。

まとめ

サイトを見ているユーザーにはどのようにイメージされるのかを考えることが大切です。
弊社ではロゴ、webなど様々制作が可能です。お困りのことがあればお気軽にご相談ください。

新年あけましておめでとうございます！
本年もどうぞよろしくお願いいたします。

はじめまして！
エクスフィールドの新人Webデザイナーです！
今回は、現場に入らせてもらい新しく学べたことを新人目線で紹介していきたいと思います。
Webサイトを制作している時に、
フリー素材サイトで素材をダウンロードしたはいいけど、色を変更してデザインに使用したい！
そんな時がよくありませんでしょうか？
今回は、PhotoshopとIllustratorを使用して画像の色を変える方法を紹介していきます。

Photoshopで素材を白黒画像にする

1.Photoshopで画像を開く
2.画面上部の、「イメージ」メニューから「モード」を選択し、「グレースケール」に変更する
その際カラー情報は破棄していただいて構いません。

画像を統合する

1.レイヤーパネルを確認
2.レイヤーが「背景」レイヤーになっていることを確認
3.「背景」レイヤーになっていない場合や、複数レイヤーが存在している場合、
パネル右上の３本線のメニューを開き、「画像を統合」を選択する

そうすると、レイヤーが統合され、レイヤー名が「背景」になります。

psdデータで保存する

「ファイル」メニューから、「別名で保存」を選択し、名前をつけて保存する。
ファイルの種類は「.psd」に指定します。

Illustratorでpsdデータを配置

1.Illustratorで新規ファイルを作成
2.保存したpsdデータをドラック＆ドロップでIllustratorに配置する

オブジェクトを選択し、「塗り」の色を変更

配置したオブジェクトを選択し、「カラー」パネルや「スウォッチ」パネルを使い、
塗りの色を指定すると、画像の色が変わります。

前の作業にてPhotoshop上で「画像を統合」を実行しましたが、
この作業を行わないとIllustrator上で指定しても色が変わらないので注意してください。

XDで作成されたデザインカンプに慣れていると、最初はPhotoshopからのコーディングに戸惑うことがあると思います。
ここではPhotoshopのデザインカンプからコーディングする際に覚えておくと便利なことを紹介していきます。

コーディング用に環境を設定する

単位をpxにする
1.左上の編集タブから環境設定をポイントし、単位・定規を選択する
2.環境設定画面が開いたらpixelに変更する

ワークスペースを設定する
1.レイヤー、プロパティ、カラー以外のコーディングに使わないパネルを閉じる

2.文字、情報パネルを表示させる
ウインドウメニューから文字、情報をチェックする

文字パネルをプロパティの隣に、情報パネルをカラーの隣にそれぞれドラッグ＆ドロップする

3.コーディング用のワークスペースとして保存しておく
※呼び出す時はウィンドウ→ワークスペース→コーディング用

コーディングで最低限使うツールを紹介

コーディングでよく使うツールは以下の通りです。
1.移動ツール：オブジェクトを選択するとプロパティで幅、高さを確認できる。このツールでほとんどの値が取得できる。
2.ものさしツール：線を引いてその長さを確認できる。細かい隙間を測りたい時に使う。ものさしツールとスポイトツールは同じ場所にある。長押しすると選択できる。
3.スポイトツール：カラーコードを確認できる。移動ツールで選択しても確認できる。
4.文字ツール：文字を選択してコーディング用に貼り付けることができる。移動ツールでダブルクリックしても選択できる。

値を取得する方法

1.オブジェクトの値を取得する　
移動ツールでオブジェクトを選択するとプロパティパネルで幅、高さ、ボーダーなどの値を確認できます。

色のアイコンからカラーコードを確認できます。

ボーダーが設定されている場合、オブジェクトを選択すると線の太さや色、border-radiusを確認できます。

透過画像はレイヤーパネルの不透明度で確認することができます。　不透明度80％ならCSSはopacity0.8になります。

2.文字の取得
文章を文字ツールで選択するか移動ツールでダブルクリックします。文字パネルを開くとfont－family、太さ、文字サイズ、行間line-heightなどを確認できます。

3.余白の取得
移動ツールでオブジェクトを選択した状態でctrl（command）を押すと近くのオブジェクトとの距離が表示されます。

画像の書き出し

一つ一つのレイヤーから書き出す方法
対象の画像を移動ツールで選択するとレイヤーがハイライトで選択されます。レイヤーの上で右クリックし書き出し形式を選択します。

PNGやJPGなどの書き出し形式、　ファイルサイズ、画像サイズを指定して保存することができます。ファイルの保存先を指定して保存します。

一括で保存する方法
レイヤーの名前をjpgや.pngなど画像の拡張子をつけて保存します。レイヤーをダブルクリックすると名前を変更できます。画像の拡張子になったものが一括で書き出しできます。

ファイル　⇒生成　⇒画像アセットにチェック ⇒保存（ctrl+ｓ）　

開いているpsdファイルと同じ階層にassetsファイルが生成され、中に画像が書き出されます。

上記の方法だと基本的には等倍で書き出されますが、２倍サイズで書き出すこともできます。
２倍サイズで書き出したいときはレイヤー名を変更するときに200％と入力し半角スペースの後に名前を付けて＠2xとつけて保存します。（ctrl+ｓ）　例）200% mv@2x.png

すべての画像に対し同じ作業をするのが大変なので、まとめて書き換える方法があります。
名前を書き換える用のレイヤーを作る：右下のプラスボタンを押して一番上にレイヤーを作ります。
名前　1倍の方を書き出すファイル名をつける：「default 1x, 200% 2x/@2x」　⇒保存します。
全部のレイヤーにこの設定があたる：全部の画像が1倍、2倍のサイズで保存されるようになります。

ホームページを制作したいけど何から始めてみればいいかわからない
そんな方にまずはドメインがなぜ必要なのか説明します。

ドメインはインターネット上の住所
https:××××.○○.jp
××××の部分になります。

××××の部分は自分のオリジナルアドレスとして取得できます。

ドメインの種類

ドメインには独自ドメインとサブドメインがあります。
独自ドメインはユーザーが自らアドレスを決めて利用できるドメインのことです。
一方、サブドメインは独自ドメインをさらに細かくしているアドレスのことを指します。

例えば、
https:△△△.××××.○○.jp

この場合は△△△がサブアドレスになります。

独自ドメインのメリット

主には自分でアドレスが決められることが大きなメリットとなります。
自社のアピール、専用メールアドレスの使用、検索エンジン（SEO）にてヒットしやすくなるなどがあげられます。

独自ドメインを使用することで自社の名前や、ブランディングができ、ユーザーが検索をしたときに上位に表示されるようになります。

サブドメインのメリット

なぜ、サブドメインを作成するのかメリットをご説明します。
独自ドメインサイトとは別のコンテンツサイトを作成したい、複数のサイトを運用したいなどの目的があげられます。

その他、ドメイン費用が少なく済むことも挙げられます。
いくつも独自ドメインからホームページを作成するとそれだけの費用がかかってしまいます。
現状使用しているホームページとは別のカテゴリーで分けたいということですと別ですが
費用を安く抑えたい！という方はサブドメインからの作成することをお勧めいたします！

まとめ

弊社ではドメインやサーバー関連、WEB制作周りでお困りのことがあればぜひ、ご相談ください！