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

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

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

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

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制作周りでお困りのことがあればぜひ、ご相談ください！

「ホームページ」と「ランディングページ（LP）」の違いについては過去の記事で紹介をしましたが、今回はランディングページにスポットライトを当てて紹介します。

商品の魅力を効果的に伝える

ランディングページは通常のホームページのようにトップページや会社概要などを作らず、
１ページ完結型です。
ページの移動をすることなく、商品をしぼってユーザーに紹介ができるので、
閲覧をしにきたユーザーは簡潔に必要な商品の情報だけを取り入れることができます。

事例の紹介

https://cagiana.jp/2021christmas/index.html
直近で作成を担当させていただいたCAGIANA様のクリスマス販促LPです。

商品の情報を紹介するだけでなく、こういった季節のイベントに合わせて
販促をできることもランディングページの魅力になります。
また、こういった季節のイベントに合わせたページはgoogle広告などと合わせて運用がしやすいのも魅力の一つです。

まとめ

今年度は特にランディングページの作成依頼が多く、
需要の高まりを感じる年でした。
弊社では様々な用途に沿ったランディングページの制作が可能ですので
お気軽にご相談ください。

アクセス解析ツール「Google Analytics」の活用について簡単にご紹介します。

Google Analyticsは無料で利用できます。アクセス解析からユーザーの行動を知ることで、効果的にWebサイトを運営していきましょう。

なぜアクセス解析ツールを導入するべきなのか？

Webサイトで来訪ユーザーに実現してほしいことは何でしょうか。
例えば、オンラインストアであれば「商品購入」、サービスを提供している会社であれば「問い合わせ」や「サービスの申し込み」などが考えられます。
Webサイトを訪問してくれたユーザーのうち、どれくらいのユーザーが商品購入やサービスの申し込みをしてくれたのか。そのユーザーはWebサイト内のどのページを見ていたのか。あるいは、どのページを見た後に離脱するユーザーが多いのか。
アクセス解析からこうしたユーザーの行動がわかれば、効果的に課題のページを特定して、改善策を考えることができます。

アクセス解析でどんなことがわかる？

たくさんの項目がありますが、基本的なメニューは以下の通りです。
ユーザーメニュー
サイトへの訪問回数、訪問ユーザー数、ユーザーの使用デバイス、性別、年代など、訪問ユーザーに関する情報を見ることができます。
ユーザーの属性を知ることで、ウェブサイトのコンセプト設計に役立てることができます。
集客メニュー
ユーザーがどのようにしてこのサイトに訪問したのかがわかります。検索エンジンから、SNSから、広告から、他サイトのリンクから・・・etc。
集客のために機能しているメディアを把握することで、効率的に集客アップするためには今後どのメディアに力を入れればいいか対策を講じることができます。
行動メニュー
ユーザーによく見られているページや、平均ページ滞在時間、サイトの離脱率など、ユーザーの行動を知ることができます。
Webサイト内の導線やコンテンツ内容の見直しに役立てることができます。
コンバージョンメニュー
「商品購入」「問い合わせ」といった目的達成の数・割合を見ることができます。

アクセス解析をどう活用する？

①分析
各種レポートを確認しながらユーザーに対する気づきを発見していきます。
年代、性別、使用デバイスなどのユーザー属性データや、どのページを閲覧したか、どういう順番でページを閲覧したか、ページのどの部分をクリックしたかなどの行動データを可視化します。
②施策検討
データから得られた気づきをもとに、ページのレイアウト修正、コンテンツの差し替えなどWebサイトの改善案を考えます。
③施策実施
改善案をWebサイトに反映します。実行する前に、どの数値を見て効果を測定するかを決めておきます。
④結果確認
データを見て結果を確認します。

このサイクルを繰り返すことでWebサイトを改善していきます。
今後Webサイトからの集客や売上増加など成果を上げるためにぜひGoogle Analyticsを導入してみてはいかがでしょうか。

多くのWEBサイトは、PCで開いた場合とスマホで開いた場合にそれぞれ見やすいよう異なるデザインで表示されていると思います。これはどんなデバイスからでも画面サイズに応じて表示を最適化するレスポンシブデザインと呼ばれる技術です。
レスポンシブ対応でないサイトでは、スマホで見た時に文字が小さくて見づらい、リンクをクリックしづらいなど操作性の悪さにストレスを感じてユーザーがサイトから離脱してしまう可能性が高くなります。

メンテナンスが簡単

従来は、スマホ用、タブレット用、PC用というように、複数のHTMLファイルを用意しなくてはなりませんでした。しかしレスポンシブデザインでは、ひとつのHTMLファイルでそれぞれの画面サイズに合うようにレイアウトやデザインを調整します。
そのため、例えば「電話番号を変更したい」「新商品を追加したい」等、サイト内容に変更が生じたときにメンテナンスが簡単です。
ただし、HTMLがひとつなので、PCとスマホでコンテンツの順番を変えるなど、大幅に見せ方を変えることは基本的に難しいです。また、スマホ、PCそれぞれデザインを制作し、それに合わせたコーディングをするためPC版のみの場合より制作工数がかかります。

SEO効果を発揮

レスポンシブデザインへの関心がさらに高まっている理由として、Googleが2021年3月に※MFI（モバイル・ファースト・インデックス）へ完全移行する旨を発表したことがあげられます。レスポンシブデザイン作成を行うことで、スマホユーザーへの配慮がされたホームページであると認識され、SEOとしても効果を発揮することが可能です。逆に言えば、スマホ版ページを作成していないWebサイトの検索順位下落が危惧されているのです。
※MFI：Googleの自動巡回ロボットがモバイル（＝スマホ）版ページを検索結果に反映すること。

これからWeb制作を行う、あるいはホームページリニューアルを行う方は、ぜひこの機会にレスポンシブWebデザイン作成を実施されることをオススメいたします。