Blogブログ

記事一覧

カテゴリー:ブログ

  • ブログ

ブラウザのキャッシュを削除して最新の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上で指定しても色が変わらないので注意してください。

  • ブログ

Photoshopのデザインカンプからコーディングする

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

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

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

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

2.文字、情報パネルを表示させる
ウインドウメニューから文字、情報をチェックする
パネル設定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など画像の拡張子をつけて保存します。レイヤーをダブルクリックすると名前を変更できます。画像の拡張子になったものが一括で書き出しできます。
一括書き出し01

ファイル ⇒生成 ⇒画像アセットにチェック ⇒保存(ctrl+s) 
一括書き出し02

開いているpsdファイルと同じ階層にassetsファイルが生成され、中に画像が書き出されます。
一括書き出し03
上記の方法だと基本的には等倍で書き出されますが、2倍サイズで書き出すこともできます。
2倍サイズで書き出したいときはレイヤー名を変更するときに200%と入力し半角スペースの後に名前を付けて@2xとつけて保存します。(ctrl+s) 例)200% mv@2x.png

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

  • ブログ

ドメインの重要さ

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

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

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

ドメインの種類

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

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

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

独自ドメインのメリット

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

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

サブドメインのメリット

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

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

まとめ

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

  • ブログ

ランディングページの魅力

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

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

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

事例の紹介


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

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

まとめ

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

Contact

猫と本棚

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

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

メールでのお問い合わせ

お電話でのお問い合わせ

TEL:052 - 938 - 4891

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

PAGE
TOP