第4回：印象の違い〜名刺編〜

こんにちは！デザイナーの山本です。

最近、だんだん暖かくなって、
桜ももうすでに開花…！
春が近づいてきていますね〜！

ですが、まだ朝晩は冷え込むので、
服装も気が抜けません。。
体調を崩さないように気をつけないといけないですね。

さて、今回のテーマは、
文字と紙による「印象の違い〜名刺編〜」について
書きたいと思います！

見比べてみよう！印象の違い

ロゴは、会社の『顔』となる大事なものであり、
名刺もそのロゴをのせた、
会社としての第一印象を決める大切なツールの一つです。

人も服装や髪型で印象が変わるように、
名刺も、紙や書体を変えることで印象が全く変わります。

ロゴを作成された際は、
名刺にも会社としての印象付けたいイメージのデザインにすることや、
紙にまたちょっとした工夫をすることで、
数多くある企業の中でも第一印象を残すことができます。

1. スタイリッシュ・シンプルに仕上げたい！

▲ 書体：ゴシック体、
　　紙：ホワイト（さらっとした質感のもの・ツヤ感が少しあるもの）
文字をゴシック体にすることで、かっこいい印象に仕上がります。
また、紙を真っ白なものを使用すれば、とてもクリーンな印象に。

2. 高級感・上質な感じにしたい

▲ 書体：明朝体
　　紙：オフホワイト（少し質感のあるもの）
明朝体は、上品なイメージにしたい時に使用します。
紙をオフホワイトにすることで、少しだけ柔らかさが加わります。

3. 柔らかい印象・優しいイメージにしたい

▲ 書体：丸ゴシック
　　紙：生成り色
丸ゴシックは、書体自体がとても可愛らしく、
柔らかさや優しい印象に仕上げたい時に使用します。
紙色も、黄味が増すほど、柔らかいイメージになります。

３つを見比べてみると印象が大分違うと思います。
文字や紙については、名刺に限らず、
ロゴやパッケージ、会社案内などを作成する時にも言えることです。

特に、名刺の場合は、実際に人が手に取るものなので、
紙にこだわったり、加工を施すことで、
他とは違った印象をグッとつけられるようになります。

「細部に神が宿る」という言葉がありますが、
ロゴや名刺、会社案内などの
文字と紙に注目してみても面白いと思います！

2020年3月17日　|　スタッフ：山本, 文字と紙

第4回：web 担当吉村のWEBブランディング

こんにちは
web担当の吉村です。

新型コロナウイルスの影響が波紋を広げていますね。
みなさんは、いかがお過ごしでしょうか…。

私はというと、この情勢もさることながら、
楽しみにしていた映画が軒並み公開延期になり
前回触れた、映画館の会員カードの出番が余計になくなってしまいました。

…とはいえ、仕方ないですね。
今は手洗いうがいを徹底するしかありません…！

そんなわけで、今回のテーマはこちら。

モバイルフレンドリーなサイトを制作するには？

（前回の続きになりますので、もしよろしければ改めてご確認いただけたら嬉しいです。）
「SEO対策にも◎モバイルフレンドリーなサイトにしよう」

1. モバイルフレンドリーの条件をおさらい！
2. 方法その1 スマートフォン専用のサイトをつくり、アクセス元媒体を判別して振り分ける方法
 3. 方法その2 レスポンシブウェブデザインに作り変える方法

1. モバイルフレンドリーの条件をおさらい！

前回の記事まで読めないよ〜という方に、さらっとおさらいです！
Googleの提唱する、モバイルフレンドリーの条件を確認しましょう！

＜Googleが提唱するモバイルフレンドリーの条件＞
・Googlebot(Googleの検索AI)によってクロール(サイト内を巡回)される状態になっているか。複雑すぎるサイト構造(ページの改装が深い、リンク遷移が紛らわしいなど）になっていないか。
・モバイルでは一般的ではないFlashなどのコンテンツを利用していないか。
・モバイル画面でズームしなくても読むことができるフォントサイズになっているか。
・ユーザーが横スクロールやズームしたりする必要がないように、コンテンツのサイズと画面サイズが一致しているか。
・リンクの誤タップをしないように、それぞれのリンク部分が離れて配置されているか。

上記条件に基づいて、以下のURLでもかんたんに診断できます。
参照：モバイルフレンドリーテスト – Google Search Console

つぎは、実際にWEBサイトをモバイルフレンドリーにする方法に触れていきましょう。
弊社でご案内しているのは主に以下の2つです。

2. 方法その1
スマートフォン専用のサイトをつくり、アクセス元媒体を判別して振り分ける方法

アクセスしてきた媒体(PCなのか、スマートフォンなのか）を判別して、そのURL内で読み込んで表示する情報やデザインを振り分ける方法です。
スマートフォンの中でも、AndroidなのかiPhoneなのかなど、細かい設定も可能に。
媒体毎に大きなデザイン変更、情報整理が可能で、情報系メディアサイトが採用していることが多い方法です。

【イメージ画像】

【導入のメリット】
・媒体別にページの内容を含め大幅な差異を表現できるので、提供したいターゲットに合わせたデザイン施策が可能に。
・違う媒体の必要ない内容がページ内に含まれていないのでページデータが軽くなり、表示が比較的早くなる。
・ページを構成するデータが別なので、独立した運用管理ができる。（スマートフォンページにだけキャンペーンを掲載する！など。）

【導入のデメリット】
・html化（WEBサイトの構築作業）の際に、読み込み用の設定が必要となる。
・構築時の規格にあわせてページを作りきってしまうため、最新機種や最新規格の表示には、万全な対策がしづらい。
・ページを構成するデータが完全に独立した別物なので、更新するときは両方とも更新しなければならない。（1ページ分の作業も、実質2ページ分）

3. 方法その2
レスポンシブウェブデザインに作り変える方法

画面の幅の基準値（ブレイクポイント）を決め、それ以上であればパソコン用デザインを表示、それ以下はスマートフォン用デザインを表示することができる方法です。*1
端末情報に縛られないため、タブレットや大画面PCなどブレイクポイントを複数設定することも可能です。

【イメージ画像】

【導入のメリット】
・Googleが推奨している方法なので、Googleの検索アルゴリズムに強い
・基準が画面幅のため、機種に囚われず、新しい規格サイズの新機種が発売されても表示エラーは起きにくい。（*2）
・HTML（ページを構成するコード）が同じなので、1度ですべてのデザインが更新される。運用時に複数ページを変更する手間が省ける。

【導入のデメリット】
・ブレイクポイント毎の微調整が必要。
・使用するコンテンツは同じものなので、デザインを大幅に変えることが難しい。
・１ページにパソコン版・スマートフォン版などすべての情報を含まれるため、ページ内データ量が多くなり、表示に時間がかかる場合がある。

*1：パソコン上でも、ウィンドウサイズを狭めることでスマートフォン用のデザインを表示することができます。
*2：Flashなど過去には主流だったが、提供終了するサービスなどが内包されている場合は、表示されなくなる可能性があります。

いかがでしょうか。
どちらの方法も一長一短ではありますが、PC版のみのサイトの方はご検討されるといいでしょう。

次回更新は、すこし時間があきますが、4月14日(月)です。

2020年3月10日　|　スタッフ：WEBブランディング, 吉村

第4回：海の近くのコーヒー屋さん kou’s coffee

こんにちは。ディレクター草場です。

なんでもネットで買えてしまうこの時代に、ついつい足を運びたくなるお店を紹介しています。

今日ご紹介するのは「香豆珈琲 – kou’s coffee」。

千葉県富津市、鋸山や富津海岸など自然豊かな場所にあるコーヒー屋さんです。

私も鋸山から海岸の方へ移動する途中で寄らせていただきました。

お店の内装までオリジナル
香豆珈琲 – kou’s coffee

美味しいコーヒーとお菓子とマスターの楽しいお話で、とても素敵な時間が過ごせました。
聞けばご夫婦でやられているお店とのこと。
コーヒーは、マスターが昔から「美味しいコーヒーを飲みたい一心で」淹れていたものが、お仕事に。お菓子は奥さんの手作り。
そしてなんと、お店はお二人でコツコツ、古民家をDIYしたんだそうです。

白壁に木の感じが、とても気持ちのよい空間。