本日はホームページをhtmlなどの知識がなくても管理できるようにするCMS
「WordPress」についてご紹介いたします。

CMSとは？

コンテンツ管理システムと言われるもので、アメブロなどのようにページ制作のノウハウなどが無くても自分である程度の更新をできるようにするシステムのことを指します。

既存のブログサイトのような決まった形ではなく、自分の理想により近いブログを作れたり、
ホームページを丸々１つ作ることもできてしまいます。
通常ではホームページを変更する場合、ホームページを制作した会社に修正の依頼をするケースが多いですが、CMSを導入しておけば導入された箇所を自由に変更することができます。

どういった人が対象？

ホームページを運用するにあたって更新する時CMSが入っていない場合はホームページ管理会社へ修正依頼を出し、見積もりをしてもらい修正。
というのがよくある流れかと思います。
その場合もちろん修正費用が発生しますし、すぐに更新したいのに！というもどかしさを抱くことになります。

そんなあなたがまさに対象です！
CMSを導入すると管理画面にログインするだけで誰でも簡単にホームページの修正ができてしまします。

でもお高いんでしょう？

通常のCMSを導入をするホームページと比べるとどうしても費用はかかってしまいます！
ただ、弊社ではお打ち合わせの段階でどこの修正は自分でしたいかなどしっかりお聞かせいただきます。
その際に一部のみCMS化することでお安くすることができるなどの提案も都度させていただいています。

ご新規の作成だけでなかホームページをリニューアルしたい！というご依頼も承っていますのでお気軽にお問い合わせください！

ビジネスのブランディングにおいて重要な要素であるロゴ。ここでは無料で簡単にロゴを作成することができるサービスを２つご紹介します。いずれもユーザー登録不要、商用利用OK、誰でもすぐ使えます。

LOGO MAKER

ロゴのテキストを入力してフォントやカラー、アイコンを選択するだけで簡単にロゴを作成することができます。ダウンロードするサイズも選べて便利です。

LOGO MAKER

1.ロゴのテキストを入力します
2.フォント、文字の太さ、カラーを選択します。
3.お好みでアイコンを選択し好きな場所に配置します。アイコンのカラーやサイズは任意に設定できます。
画面右側のプレビュー画面でPCやスマホの表示、名詞や紙袋に印刷した際の表示を確認することができます。

4.完成させるボタンをクリックし、保存形式とサイズを選択して保存します。

Hatchful

ロゴのテキストを入力していくつかの質問に答えるだけで数十個のロゴを提案してくれます。

Hatchful

1.ビジネスの業界を選択する

2.デザインのスタイルを選択する

3.ビジネス名を追加する

4.ロゴをどこで使用するか選択する（複数選択可）

5.ロゴを選択する

こだわりのオリジナルデザインをプロに依頼するなら

「こだわり」や「熱い想い」「ビジョン」のこもったオリジナルのロゴをプロに制作して欲しい、というお客様にはエクスフィールドが時間が経っても⾊あせず、⻑期的にご使⽤いただけるロゴの提案をさせて頂きます。お気軽にお問い合わせください。ぜひロゴ制作のページもご覧ください。

本日は新人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上で指定しても色が変わらないので注意してください。