本日は作業の効率を上げるショートカットキーをご紹介します。
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を使う
画像をスキャンして最適化していない画像をピックアップし一括で圧縮することができます。
導入してアップロードしたタイミングで自動的に圧縮してくれるので導入しておくと良いでしょう。

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

まとめ

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

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

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