Blog

記事一覧

デザイン基礎知識
  • ブログ

WEBデザインの基礎知識

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

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

デザインの4原則

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

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

使用する色について

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

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

  • デザイン
  • ブログ

レイアウトの構成

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

情報整理

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

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

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

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

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

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

視線誘導

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

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

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

余白でグルーピング

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

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

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

まとめ

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

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

webdesigner
  • デザイン
  • ブログ

Web制作の効率化!Google Chrome拡張機能

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

Page Ruler Redux

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

ColorZilla

Webサイトデザインをする際、ヘッダーの色使いを真似したい、この要素の色は何色だろう?など、そんな時に便利な色取得ツール「ColorZilla」を紹介します。
colorzilla
使い方はChromeの画面右上にあるスポイトマークのアイコンから、「Pick Color From Page」をクリックします。
するとカーソルが出てくるのでページ上で取得したい色をクリックします。取得した色は自動的にクリップボードにコピーされます。

CSS Peeper

「CSS Pepper」はWebサイト内の要素をクリックするだけで、色や幅や高さ、padding、margin、font-familyなどを一発で調べられる拡張機能です。
Page Ruler Reduxと似ていますが、CSS Pepperの方が一発で様々な情報を取得できます。
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サイトで画像の占める割合は非常に大きいです。ページの読み込み時にすべての画像を読み込んでいては膨大な時間がかかってしまいます。画像の遅延読み込みとは、スクロールに応じて画像を必要なタイミングで読み込むといった対応です。
対応方法としては、以下の方法があります。

1.loading=”lazy”属性を付与する方法
Chrome、Edge、OperaおよびFirefoxでサポートされています。但し、現時点(2021年12月)ではloading=”lazy”は Safari は未対応、Firefoxはimageのみ対応です。(loading=“lazy”属性をサポートしていないブラウザに記述した場合、無視されるだけで特に悪影響はありません。)
最初に表示されるファーストビューにある画像に対しては設定しないようにします。スクロールしなければ見えない範囲に配置されている画像にのみloading=”lazy”を記述するようにします。

2.JavaScriptで制御する方法
loading属性がサポートされていないブラウザではlazysizesという遅延読み込みのライブラリを使って遅延読み込みを行うことができます。Browser-level image lazy-loading for the web で紹介されています。

画像の圧縮

画像を圧縮して容量を減らすことで表示速度を上げることができます。
知らないうちに容量の大きな写真をアップロードしてしまうこともあるので、なるべく画像はそのまま使うのではなく、圧縮して使うようにしましょう。ここではWordPressのプラグインと無料ツールをご紹介します。

1.WordPressのプラグインEWWW Image Optimizerを使う
画像をスキャンして最適化していない画像をピックアップし一括で圧縮することができます。
導入してアップロードしたタイミングで自動的に圧縮してくれるので導入しておくと良いでしょう。

EWWW

2.無料の画像圧縮ツールTinyPNGを使う
手作業になるので少々手間はかかりますが、EWWW Image Optimizerより圧縮率が高く無料で使えるツールです。
画像をドラッグ&ドロップするだけなので簡単に使えます。

TinyPng

まとめ

表示の遅いサイトはユーザーに読んでもらえる可能性が低くなってしまうため、表示速度の改善はGoogleのSEOの側面からも重要な対応となってきます。

キャラクター

今回ご紹介した以外にも色々な方法がありますが、まずはすぐにできるところから取り組んできましょう。

  • ブログ

ブラウザのキャッシュを削除して最新のWEBサイトを表示する

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

Chromeのキャッシュ削除手順

PC版
1. パソコンで Chrome を開きます。
2. 画面右上のその他アイコン をクリックします。
3. [その他のツール]  [閲覧履歴を消去] をクリックします。
chrome画面キャプチャ1
4. 上部で期間を選択します。すべて削除するには、[全期間] を選択します。
5. [Cookie と他のサイトデータ] と [キャッシュされた画像とファイル] の横にあるチェックボックスをオンにします。
6. [データを消去] をクリックします。
chrome画面キャプチャ2
※詳細はGoogleアカウントヘルプにてご確認ください
Android版
1.画面右上から設定をタップします。
2.プライバシーとセキュリティをタップします。
3.閲覧データの削除をタップします。
4.[キャッシュされた画像とファイル] の横にあるチェックボックスをオンにします。
5.[データを削除] をタップします。

Safariのキャッシュ削除手順

Mac版
1.メニューのSafariから環境設定を開きます。
safari画面キャプチャ1
2.環境設定ウィンドウが開いたら詳細をクリックし「メニューバーに”開発”メニューを表示」にチェックを入れ閉じます。
safari画面キャプチャ2
3.メニューに表示された開発をクリックし、「キャッシュを空にする」をクリックします。
safari画面キャプチャ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デザイン
  • ブログ

Illustratorを使用して素材の色を変える方法

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

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

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

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

画像を統合する

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

psdデータで保存する

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

Illustratorでpsdデータを配置

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

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

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

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

  • お知らせ

年末年始の営業について

平素は格別のお引き立てを賜り厚く御礼申し上げます。
株式会社エクスフィールドの年末年始休業期間につきまして下記の通りご案内いたします。

■年末年始休業期間
2021年12月28日~2022年1月4日

来年も弊社をご愛顧いただきますようお願いたします。

Contact

猫と本棚

エクスフィールドへのお問い合わせ。

ホームページやポスター、LINEスタンプ等々何かを作りたいけどなかなか作れずに困っている皆様。
エクスフィールドに相談してみませんか?ご相談は無料ですので、いつでもお伺いいたします。

メールでのお問い合わせ

お電話でのお問い合わせ

TEL:052 - 938 - 4891

受付時間:10:00~18:00(平日)

PAGE
TOP