伝わる!フォントの選び方

ショップの看板や、商品の紹介バナーを用意したいけど、

ショップのイメージに合うようにつくるにはどうしたらいいの?

 

そんなお悩みをお持ちの店舗様に向けて、

ショップのイメージにあったフォントを選ぶコツをご紹介します!

 

あなたのショップのイメージは?

あなたのショップを思い浮かべてください。

ショップの雰囲気に合ったフォントを使うことで、ショップの雰囲気をより一層引き立てる画像をつくることができちゃいます!

 

フォントってどんなものがあるの?

フォントはざっくりと明朝体とゴシック体に分けることができます。

明朝体は、線の先端に飾りがついている文字、ゴシック体は飾りがついていない文字のことです。

また、欧文にも、明朝体とゴシック体があります。

線についている飾りのことを「セリフ」と呼ばれることから、

それぞれ「セリフ体」と「サンセリフ体」と呼ばれています。

 

この4つのフォント、実は使い分けることで、文字の印象ががらりと変わっちゃうんです。

さっそく、フォントごとの印象を見ていきましょう。

 

◆明朝体

上品で繊細、高級感のあるイメージがあります。おしゃれな洋菓子店でよく使われます。

明朝体

◆ゴシック体

カジュアルで親近感がわきます。手作り用のお菓子キットなど、お手軽感を売りにしているお店へ。

ゴシック体

◆セリフ体

クラシカル、気品のあるイメージ。女性向けアパレルに。

◆サンセリフ体

元気でポップなイメージ。子ども服屋さんに。

どこに配置したらいいの?

フォントを選んだら配置しましょう。

実はフォントはイメージを作ってくれるだけではありません。

ページの見やすさにも大きく関係してくるんです。

明朝体は1文字ごとに線に抑揚があるため、長文でも読みやすくなっているのに対して、

ゴシック体は1文字の線の幅が均一なので、キャッチコピーとして目立たせたい場所に配置するにはうってつけの書体です!

読みやすく、目につきやすいフォントを意識することで、伝えたいポイントをしっかり伝えるページを作っていきましょう!

 

 

いかがでしたか?

同じ画像でも、フォントを変えるだけで印象ががらりと変わりますね。

今回ご紹介したフォントはほんの一部です。

ぜひ、あなたのお店に合ったフォントを探してみてくださいね!

レビューがうまく集まらないという方は… たまには宣伝w

昨年12月に『らくらくーぽん』というサービスをリリースしました。 当社でも久しぶりの新サービスになりますが、これが、なんと、かなり好評w   もともと弊社とお付き合いある店舗さまからも聞いていたのですが、レビュー集めるためにクーポン発行しているんだけど手作業でやるの大変。 レビュー書いてくれた人をチェックしてその人にクーポンコード差し込んで、 メールを送るのが大変。 tv_video_hensyu_hard こんな状態で、やられていた方もいらっしゃるかもしれませんw ただ、それが全自動で送られるようになったので、すごく楽になって、しかもレビューがすごく増えたと好評なんですね。 kafun_sukkiri もともとトライアルもやっていますが、3月中にお申込み頂いた方には、初期設定もこちらで行いますので、お気軽にお問合せください。 今までクーポン自体送ったことないよ。という方や、フォローメール(発送後の後に送るメール)すら送ったことないという店舗様は、 この機会にぜひご利用ください。 おまちしてまーす。    

Googleが読み込み速度を改善と売上への影響を測るツールを公開した件

googleはページの読み込み速度がSEOに影響を及ぼすことを公表しています。 ページを読み込み速度系のツールはこれまでにも公開されてきましたが、 モバイルサイト読み込み速度比較と速度改善が売上へ与える影響をシュミレートするツールが公開されています。 https://www.thinkwithgoogle.com/feature/mobile/ Continue reading "Googleが読み込み速度を改善と売上への影響を測るツールを公開した件"

HTMLって何?? HTMLを使ってWEBページを作ってみよう!

ネットショップ運営でWEBに関わる仕事をしていると、
「HTML」や「CSS」という言葉をよく耳にするのではないでしょうか?

 

聞いたことあるけど、よくわかんない・・・!
WEBぺージを作るためのプログラムかなにか・・・??
実際に自分もHTMLとCSSを使えるようになってみたい!

 

そんなHTML・CSS初心者の方向けに、 今回は「HTML」に焦点を当てて、
簡単なHTMLの説明と、実際にHTMLを使ってWEBページを作ってみましょう!

 

HTMLとは

pose_necchuu_computer_man

Hyper Text Markup Language
ハイパーテキスト・マークアップ・ランゲージ

 

HTMLとはHyper Text Markup LanguageというWEBページを作成するために使う言語です。

 

Hyper Tex・・・?言語・・・?
いきなりそんなことを言われても、ピンとこないかと思います。

 

HTMLとは何かを一言で簡単に説明すると、
「見出し」「段落」などのWEBページの構成を定義するための言語です。

 

実際にHTMLを見てみよう!

言語?構成?っていったいどこに何をどんな風に書いているの・・・?

 

それでは実際にHTMLの正体を見てみましょう!


画面上で右クリックをし「ページのソースを表示」を押してみましょう。
するとこのような画面が開くかと思います。

ソース

これがHTMLの正体です。

 

いつも皆さんが見ているWEBページは、
実はこのようにHTMLという言語で書かれており、 Internet ExplorerやGoogle Chromeといったインターネットを見るための「ブラウザ」というアプリケーションで見ることによって、今見ているこのコラムページのようにWEBページとして表示がされるのです!

 

HTMLを書いてみたい!

HTMLという言語を書いて、WEBページを作成することを「コーディング」といいます。
それでは実際にコーディングするための準備をしましょう。

○ HTMLの基本

先ほど「ページのソースを表示」で見たように、
HTMLは<h1>や</h1>など様々な「タグ」といわれるものを使って、WEBページの様々な構成を作っていきます。

 

タグにはそれぞれ意味があり、
今回は以下の4つのタグを使って、簡単なWEBページをつくって見ましょう。

 

<h1>   ・・・見出し
<p>      ・・・段落
<img> ・・・画像を載せる
<a>    ・・・リンクをつける

 

○ 準備するもの

・テキストエディタ
「メモ帳」などのテキスト編集を行うアプリケーションを利用します。

 

・ブラウザ
「Internet Explorer」や「Google Chrome」などのインターネットを見るためのアプリケーションを利用します。

メモ帳・chrome

 

実際にコーディングしていきましょう!

1.<h1>タグで見出しを作成

それではメモ帳を開いて、<h1>タグを使ってページの見出しを表示してみましょう!

 

まずはメモ帳に次のようにHTMLを記述します。

<h1>グリニッジ株式会社</h1>

 

2. 「test.html」という名前でファイルを保存

ファイル名を「test.html」という名前で保存しましょう。


「.html」とつけることにより、このファイルはHTMLのファイルですよ!と定義されます。

test.html

 

3. ブラウザで表示してみる

Google Cromeなどのブラウザを開きましょう。
ブラウザを開いたら、ブラウザ上に保存したtest.htmlをドラッグ&ドロップでもっていきます。

ブラウザ表示

すると・・・

 

「グリニッジ株式会社」とブラウザ上に表示されたでしょうか?
表示された方は、これであなたもHTMLデビュー成功です!

 

4. <img>タグで画像を表示する

次は<img>タグを使って画像を表示してみましょう!
test.htmlに次のように書いて保存しましょう。

 

<h1>グリニッジ株式会社</h1>
<img src="/wp-content/themes/greenwich2010/images/main_img.jpg" />

 

ブラウザをリロードしてみましょう。
画像が表示されれば成功です。

 

5.<p>タグで段落を作成

次は<p>タグを使って段落を作成します。

test.htmlに次のように書き足していきましょう。

 

<h1>グリニッジ株式会社</h1>
<img src="/wp-content/themes/greenwich2010/images/main_img.jpg" />
<p>グリニッジ株式会社へようこそ!</p>
<p>グリニッジはインターネットでの商取引を高い水準の技術とノウハウで応援します。</p>

 

ブラウザで再度表示すると2つの段落ができたかと思います!

 

6. <a>タグでリンクを作成

最後に<a>タグでリンクを作成してみましょう。
test.htmlはこれで完成です。

 

<h1>グリニッジ株式会社</h1>
<img src="/wp-content/themes/greenwich2010/images/main_img.jpg" />
<p>グリニッジ株式会社へようこそ!</p>
<p>グリニッジはインターネットでの商取引を高い水準の技術とノウハウで応援します。</p>
<a href="https://www.greenwich.co.jp/">コーポレートサイトはこちら</a>

 

「コーポレートサイトはこちら」をクリックすると弊社コーポレートサイトにリンクされるようになりました。

 

最終的にこのようにブラウザにWEBページが表示されていれば完成です!

html

 

まとめ

いかがでしたでしょうか。


簡単な解説でしたが、実際にいつも見ているWEBページのHTMLを見て、
コーディングしてみることでHTMLについて少しでも理解が深まりましたら幸いです。

 

今回はご紹介できませんでしたが、WEBページの構成を作成したHTMLに色をつけたり、配置、サイズを変更したりなど、 WEBページのデザイン・レイアウト・見た目を定義していくための言語「CSS」についても今後ご紹介していこうと思います!

視聴者がコンテンツとして見続けられるテレビCMとは

「視聴者が見続けられる テレビCMとは」と言うニュースをみました。

テレビはWEB上と違って 勝手に入ってくる情報がCMになっているという認識でしたが、 実施された内容はWEBにも近い情報なのかなと思いました。   内容は

Continue reading "視聴者がコンテンツとして見続けられるテレビCMとは"

ネットモール VS 自社ECサイト 結局どっち?

結論! ネットモール、自社どちらも正解です。 店舗に合ったECサイトで販売する、当然と言えば当然ですね ではどのような店舗がネットモールに合っているのか 自社ECサイトに合っているのか解析してみたいと思います。

ネットモール販売に適したタイプ

「正当な戦法を好む戦士、武道家タイプ」 手軽に出品したい場合は断然ネットモール型がお勧めです。 商品さえあればすぐに開店販売が可能です。 ヤフーショッピングは出店はずっと無料なので、とりあえず出店してみるのもありです。 ちなみにヤフーショッピングの出店者数は2018年2月時点で60万店舗と断トツで店舗数が多いです。   楽天、アマゾン、ヤフーショッピングなど認知度も高く、集客力がとても高いのも魅力です。 配送方法、支払方法もモールで既に用意されているものも多数あり、 簡単に出品するにはもってこいです。 ただしモールに来て商品を購入するため、同じ商品が並び差別化が難しいため売上を上げるためには工夫が必要です。  

どんな工夫が効果的?

じゃあ実際どうすればいいの? となるかと思います。一例を紹介します。 同じ商品でも、まとめ売りや関連商品と一緒に合わせて販売し、送料無料にし他社の同じ商品に対して割安感を出す。 セット販売によるセールを打ちやすいのも特徴です。 商品ページ数も増えるので、それだけでお客様の目に留まる確率も上がります。 セット販売やまとめ販売をされていないお店は必ず行ってください。 売上アップは間違いありません。  

自社ECサイト販売に適したタイプ

「いろいろな戦術を駆使する魔法使い、僧侶もしくは賢者タイプ」 pixta_34149969_XL とにかく自分で構想をねって自由に好きなようにサイトを作りたいなら自社サイトしか選択肢はありません。 販売するための見せ方、アップセルのアイディアがあるなら自社ECサイト構築は強力です。 始めるのはそれほど費用はかかりませんが、他と違うことをしようとするとサイトのカスタマイズで出費が増えてしまうことも、 ただし、独自のサイトが出来上がれば唯一無二の武器になります。

どんなアイディアが効果的?

たとえば商品にネームを入れて発送するサービスなどは自社サイトでしか行えません。 モールではシステムが用意されていないためです。 また梱包を特別仕様にするといったサービスも大手モールにはなかなかありません。 受け取った時の喜びまで演出できるのは自社サイトならではです。

結論、おすすめはどちらもやる

「なんでもこなせる勇者、英雄タイプ」 ネットモール、自社ECサイト、他店舗と同じ売り方をするなら断然ネットモールがお勧めです。 ただし自社でしかできないことはたくさんあります。 これからのECを生き抜くためには小規模店舗ほど、特化型となることが必須です。 ネットモール販売では通常の販売を行い。 自社サイトでは特化した販売を行っていく、それがこれからのECの生きる道です。 特化したサービスを行うためには、自社サイトでしか実現できないことがたくさんあります。 自分のサイトを持つと言うのは一国一城の主になるという夢でもあります。 また自社サイトで販売が順調となるにはそれだけ認知度も必要です。 自社サイトで成功できればモールでの成功も期待できます。 自社サイトは敷居が高いように思われますが、ぜひ挑戦してみてください。

勇者、英雄への近道

弊社にはノウハウが詰まっています。 弊社のようにシステム開発もコンサルも行える会社はなかなかありません。 ショップ立上げ、自社サイト構築から制作、コンサルまで弊社でしたら一貫して何でもこなせますので、是非お声掛けください。 ネット界の勇者、英雄となるべくお手伝いをさせていただきます。 弊社とともに頂点を目指しましょう!

ディズニー挙式

こんにちは!川崎です!

今週は連続の投稿となります(笑)

 

今日は先日参列したディズニー挙式について書きます。

結論としては『さすがディズニー!!』と思いました。

Continue reading "ディズニー挙式"

雪の日比谷公園

こんにちは!川崎です!

少し前になりますが、都内でも大雪が降りましたね。

都内の皆さんは、慣れない雪で大変だったのではないでしょうか?

私も、帰りは、電車がなかなか動かず、いつもの倍以上帰宅にかかってしまいました。。

さて、雪の翌日などは、新橋でも雪が積もっていたのですが、

歩いてすぐの日比谷公園に行ってみました。

Continue reading "雪の日比谷公園"

ブリューゲル展

みなさんはじめまして、先月入社しました石井です。 よろしくお願いします。   本日は、上野の東京都美術館で開催されている 『ブリューゲル展 画家一族 150年の系譜』へ先日行ってきたので 紹介したいと思います。 

Continue reading "ブリューゲル展"

視線の動きを利用する!

読むときの人間の視線の動き方って知っていますか?

ネットショップを運営している方は特に気になるかと思います。

コレを知っていると効果的に読んでもらえるサイト作りが可能です。

 

人は無意識に左上から右下へ向かって視線を動かすそうです。

読書などの習慣から刷り込まれている そうで、 「読書重力(ReadingGravity)」とも呼ばれます。

これをパターン化したものに以下の3つが挙げられます。

 

グーテンベルグ ダイアグラム

均等に配置された情報を見る際の視線の流れパターン。

視線が左上から右下へ、ちらちら読み飛ばしながら移動していきます。

テキストが多いレイアウトに向いているパターン。

見せたい情報はこのライン上に沿って配置するとユーザーの目に留まりやすいです。

『グーテンベルグ ダイアグラム』を取り入れるなら、

・左上と右下に重要な情報を配置する

 

Zの法則

主に紙媒体での視線パターンが『Zの法則』と呼ばれています。

視線が左上から始まり、右上に水平移動、その後左下に斜めに移動し、最後に右下。

決められた領域の中で全体把握をするためにこのような視線の動きになるようです。

日常生活ではチラシなどの広告、コンビニや自動販売機などの商品陳列に活用されています。

3333

『Zの法則』を取り入れるなら、

・始点となる左上に読んでもらうためのキャッチーな情報・画像などを配置する

・右上、左下に目が留まる画像などの情報を配置する

・右下にゴールやゴールへ誘導する情報を配置する

 

Fの法則

WEB上での視線パターンが『Fの法則』と呼ばれています。

左上から右に目線が移動するのは『Zの法則』と同じですが、その後始点の左上から少し下に移動し、また右に目線が移動するという文字通り『F』の字を繰り返します。

情報が無限にあるWEB上では全体ではなく具体的な内容を把握するためにこのような視線の動きになるようです。

『Fの法則』を取り入れるなら、

・始点となる一番上に重要な情報を並べて配置する

・『F』の配置で見てもらいたい情報を並べて配置する

 

いかがでしたでしょうか?

ユーザーの視線の動きを意識して、重要なコンテンツを効果的に配置する。

コレによりウェブページの内容がよりユーザーに伝わります。

「視線」の動きに配慮したサイト設計を心掛けましょう!