2017年10月28日|カテゴリー「10月
デザイン以外にも使える!文字に関する5つの基本ルール

こんにちは。デザイナーのあおきです。
10月もあと4日、さらに言ってしまえば、あと2か月弱で2017年も終了ですね。

さて、本日は、デザイン以外にも、社内文書やプレゼン資料などにも利用できる文字の基礎知識について、少しご説明できればと思います。

文章の知っておきたい5つの基礎ルール

1.ひらがな・カタカナは詰める

ひらがな・カタカナの文字間

普通の文章では気が付く人も少ないのですが、特に見出しなどで、大きい文字を使用する際、漢字とは違い、ひらがなやカタカナはどうしても、間延びした印象になりがちです。
ひらがな・カタカナは文字と文字の間隔を20%程度詰めることで、全体にしまりが出ます。

2.記号の文字間も詰める

記号の文字間

見落としがちなのが、記号の文字間隔です。
この記号(、。・「」など)も間延びした雰囲気を出してしまいがちなため、忘れないように注意しましょう。

3.助詞を小さくする。

助詞を小さく

広告などに使われているテクニックです。
助詞とは、「は」「が」のように、他の単語などに付属する単独では使わない言葉のことを言います。
他の文字よりも助詞を一回り小さくして、左揃えの場合は下寄せ、中央揃えの場合は真ん中揃えにすると、より効果的です。
プレゼン資料のタイトルや見出しに使うと、文章に抑揚がついて、見た目も美しい文章になります。

4.「円」などの単位は小さめを選ぶ

単位を小さく

金額や数量などの単位は、数字と並べてしまうと少し大きく見えてしまいがちです。
「円」や「個」などの単位も、助詞と同じく一回り小さいサイズを選んでみると、バランスが良く、見やすくなります。

スーパーの文字などはさらに数字が大きく目立つように極端に大きくしていることもありますので、参考にしてみましょう。

5.文字をゆがめない

文字はゆがめない

デザインでもあり得る事例ですが、文字の拡大・縮小には細心の注意を払いましょう。
原則、文字は縦横比を崩して文字をゆがめないように気を付けましょう。
縦横比を保たない場合、フォントの形がゆがみ、文字が読みにくくなる原因になってしまいます。

文字は写真と同じで、縦や横に伸ばして本来の縦横比を崩してしまうと、読みにくくなり、見た目的にもあまり美しいとは言えません。

まとめ

今回は、今日から始められるような、知っておきたい5つのルールをご紹介しました。いかがでしたでしょうか。

他にも文章には行間や、字送りなど様々な手法を調節してより綺麗にまとめることができます。
今まで意識していなかった文章も、「ひと手間」加えるだけで、より良い文章になりますので、是非取り入れてみてくださいね。

2017年10月25日|カテゴリー「10月
ハロウィンのイメージカラーって?
こんにちは!先日、札幌市清田区にある、弊社の事務所前に雪がすこーし積り、そろそろ冬なんだなぁ、と感じるようになってきました。

いつものごとく、突然ですが、「冬」と聞くとどのような色を想像しますか?

以前、色についてお話した通り、人間は、見る色によって印象が全く違います。
ですが、人間同士の共通の認識は大体あるので、その時々、提供したいサービスなどでイメージカラーを変えただけで売り上げが上がる、なんてこともしばしば。

例えば、もうすぐハロウィンの季節ですね。
ハロウィンの場合は、オレンジや、赤、紫、黒などを組み合わせている配色が多く、怖いけれど楽しいイベントと感じさせるようなデザインが多いですよね。

冒頭でお聞きした冬の場合は、「雪」「氷」「寒い」など、冬独特のイメージがあるため、寒色系が多いです。

このカラーイメージですが、ホームページにも重要です。
今回は、Webデザインで抑えるべき3つのカラーの解説と、サイトを制作会社に依頼する際に、伝えやすくなる便利なサイトをご紹介します!

知っておいて損はない!Webデザインで重要な3つのカラー

ホームページではそれぞれ、ベースカラー、メインカラー、アクセントカラーという3つのカラーを持っているページが多く、それぞれの比率をバランスよく使用すると、美しい配色に仕上げることができます。
このサイトでも、下の図のように、ベースカラー、メインカラー、アクセントカラーがあります。
オキャクールのカラーバランス
ベースカラー70%、メインカラー25%、アクセントカラー5%程度にすると、見た目が美しい配色にすることが可能だと言われています。

ベースカラーは、最も大きな面積を占めるまさに、ベースになる色で、主に背景や、余白に使われる色です。

メインカラーは、そのサイトのイメージをつける、主役の色です。暖色・寒色だけでもガラッとイメージが変わり、お店や会社のイメージに合った配色が重要になります。

アクセントカラーは、メインカラーよりも目を引く色が良いと言われています。ボタンやなどの注意を惹きたい箇所に利用していることが多く、全体を引き締めるための役割もあります。

ベースカラーが2つあったり、アクセントカラーが2色あったりなど、そのサイトに合わせて3つのカラーから増えることがありますが、どれが重要な部分なのかが不明になるだけではなく、画面が「うるさく」なってしまう可能性があるため、弊社では、3~4色までにおさえることをおススメします。

配色って言われても難しい!

サイトにとって色はユーザーの第一印象を決める一つの要因です。
飲食関係では、食欲を指そう赤やオレンジなどの暖色系が多く使われていたり、医療系などの場所では、清潔感を出すため、青などの感触が使われることが多いです。

ホームページをリニューアルする際は、「イメージカラー」は、あらかじめ社内で話し合って、決めておくと、デザイナーにも伝わりやすく、スムーズに話が進むことが多いので、是非、以下の3つのサイトを参考にしてみてくださいね。

見ているだけでも楽しい配色サイト

NIPPON COLORS
日本の色を紹介しているサイトです。
色の名前をクリックすると、背景の色が変わり、色の名前が和名で表示される見ているだけでも、とても綺麗なサイトです。
英語サイトです。
「Start the Generator,it's free!」のボタンを押すと、シュミレーターが起動します。
後は、スペースボタンを押していくと、5色のバーがそれぞれ色が変わっていきます。
好きな色を指定することもできますし、任意の色だけ固定して他の色を変えるなど様々なシュミレーションができるので、まずは好みの色を見つけたい!という場合はお勧めです。
こちらも英語サイトです。
私もよく使っているサイトですが、このサイトは、特にバリエーションが豊富です。
ベースカラー、メインカラー、アクセントカラーがバランスよく配色されており、左上のタブで、新着、人気、ランダムでジャンル分けすることができます。

まとめ

いかがでしたでしょうか。
配色には自信がない、いつもと違う印象にしてみたいなど、ホームページ以外にも、チラシやプレゼン資料などの制作にも利用できる配色サイトです。
すべて無料ですし、複数のサイトを知っておくと、いざ配色に困ったときに有効活用ができるので、是非利用してみてくださいね!
2017年10月23日|カテゴリー「10月

こんにちは。デザイナーのあおきです。
サイトの運営・管理をされている方、毎日お疲れ様です。

サイトの運営が初めてで、残念ながらうまくいっていない方、それとは正反対にうまくいっている方、いらっしゃると思います。
そんな管理者の皆様、Googleアナリティクスは上手に使えているでしょうか?

今回は知っておくと便利な、Googleアナリティクスのマイレポートについて、解説していきましょう。

そもそもマイレポートって何?

マイレポートには、重要度の高いレポートや指標の概要を複数のウィジェットとして表示できます。一度に多数の指標を監視できるため、アカウントの状態や複数のレポートの関係性を迅速にチェックできます。マイレポートは簡単に作成、カスタマイズ、共有することができます。(アナリティクスヘルプから引用)

つまり、マイレポートは、Googleアナリティクスで表示できる情報を1ページで確認することができる機能です。

毎回確認する際に、セッション数や滞在時間などひとつづつチェックするとアクセス解析だけで、かなり時間がかかってしまいます。 そんな時にマイレポートをうまく活用すると、作業時間の短縮など様々なメリットがあります。

早速マイレポートを作ってみよう!

01
01

Googleアナリティクスにログイン後、左側のメニューの「カスタム」をクリックします。
表示されたメニューの一番上「マイレポート一覧」をクリックすると、右側の画面にマイレポートのダッシュボードが表示されます。

02
02

ダッシュボード内、左上の「作成」ボタンをクリックします。 レポートの作成オプションが表示されます。

03
03

今回は、「空白のキャンパス」を選択し、レポート名を変更し、「マイレポートを作成」ボタンをクリックします。

「ウィジェットの追加」画面が表示されます。
この画面で、各レポートを追加していくことが可能です。

ウィジェットの設定画面詳細

ウィジェットの設定

標準…レポートの表示方法を決定します。

・指標…データを数字のみで表示します。
・タイムライン…日付ごとの折れ線グラフを表示します。
・地図表示…データを地図で表示します。
・表形式…一覧表でデータを表示します。
・円グラフ…データを円グラフで表示します。
・棒グラフ…データを棒グラフで表示します。

リアルタイム…サイト上でのユーザーの行動をリアルタイムで確認できる機能です。

・カウンタ…PCやスマートフォンなどのデバイス別やキーワード別に表示します。
・タイムライン…直前の30分・60分のページビュー数がわかります。
・地図表示…現在のデータを地図で表示します。
・表形式…現在のユーザーが、一覧表でデータを表示します。

「リアルタイム」の選択肢以降は、選んだ表示方法で、表示できる内容が変わります。
表示させたいレポートを任意で選んでいきましょう。

今回は以下のようなサクッとレポートを作成してみました。

マイレポート例

よくわからない場合は迷わずテンプレートを!

細かい設定方法は後日公開予定ですが、マイレポートを知識がない状態で作るのは至難の業です。

そんな時は、レポートのテンプレートを使ってみましょう。
レポートの作成オプションの「マイレポートを作成」ボタンの右横に「ギャラリーからインポート」というボタンがあるので、そちらをクリックすると、下図のような画面が表示されます。

レポートノギャラリー

検索枠に、日本語で「基本」や「日本語」を入力すると、日本語のレポートテンプレートがありますので、利用用途に合わせて、インポートしましょう。

以上で、マイレポートの基本の解説は終了です。
まずは、テンプレートを利用して、慣れてきたら自身でカスタマイズをしてみましょう!

2017年10月21日|カテゴリー「10月
インターネットの起源って?

突然ですが、みなさん。
インターネットの起源ってご存知ですか?

いつの間にかインターネットを使っている現在、意外と知らない方もいらっしゃると思います。
今回は、インターネットがいつ生まれて、どのように使われていたかを解説します。

もともとインターネットは軍事用だった

インターネットが生まれたきっかけは、1960年代の東西冷戦下のアメリカでした。
1958年に、最先端科学技術を軍事利用への転用するため、研究を取り扱う組織として設置された、米国防総省高等研究計画局(ARPA Advanced Research Projects Agency)が、当時一部を破壊されても残った部分で動き続けるコンピュータ・システムの開発に着手しました。

当時はひとつの巨大コンピュータが中心となって、ほかのコンピュータを制御しているシステムが一般的でした。
ですが、この中心となっているコンピュータにトラブルが発生してしまうと、制御している他のコンピュータもすべて停止してしまう弱点があり、改善が必要な状態でした。

1967年、ARPAの資金提供により、世界初の「パケット通信ネットワーク」であるARPANET【アーパネット】(Advanced Research Projects Agency Network)の研究プロジェクトが発足しました。
ARPANETは、「クモの巣状にコンピュータ同士が繋がって、情報をやり取りする」という、現在のインターネットの起源と言える考えのもと開発されていきます。

そして、1969年、アメリカ国内の大学と、研究所にある4台のコンピュータを電話回線で結ぶ、ネットワーク「ARPANET」の運用が開始されました。

通信プロトコルの導入と、「www」の誕生

ARPANETは、世界初の導入から4年後の1973年、イギリスのロンドンカレッジ大学、ノルウェーの王立レーダー施設に接続され、ついに国境を越えたネットワークになりました。

同年、アメリカの学者ビント・サーフがインターネット上でコンピュータ同士が通信する際に使う決まり事である、「TCP/IP」という通信プロトコル(ルール)を発表しました。
TCP/IPは現在のインターネットでも利用されていて、バージョンアップで改良され続けているものです。
このTCP/IPの導入で、コンピュータの形態やOSが異なっていても通信できるようになり、世界中のどのようなコンピュータでも、情報のやり取りが可能になりました。

その後はCSNETやNSFNetなど、ARPANET以外の通信ネットワークが次々と開発されました。
なかでもNSFNetが広がって、有名になると、パイオニアであったARPANETは役目を終え、1990年にプロジェクトが終了しました。
その翌年の1991年、現在のインターネットとして、世界中が利用する
「World Wide Web(wwww)」が開発され、現在まで広く浸透しました。

このように、もともとインターネットは、戦時中のトラブル防止のために開発されたARPANETがもとになっています。
商用に使われるようになったのが、wwwが誕生した1990年、ここでも僅か一部の商用でしか利用できなかったインターネットが、2000年頃に、高速で大容量の情報が送受信できるブロードバンドが普及し、現在のように商用サイトの他にもYouTubeなどの動画サービスやゲーム、趣味のサイトなど、世界中の誰でも気軽に利用できるインターネットの形態になりました。

こうしてみると、積極的に一般ユーザーが利用できるようになったのは2000年あたりから。ごく最近のように思えるのではないでしょうか。

2017年10月20日|カテゴリー「10月
URLとドメインってどうちがうの?

サイト運営の用語辞典」でも、URLとは何かを説明している項目がありますが、皆様、URLとドメインの違いってはっきり説明できるでしょうか?
詳しくは、「サイト運営の用語辞典 URLとは何か?」でご紹介しておりますので、ご興味がある方は、まずはそこから確認してみてくださいね!

今回はその基礎知識から少しステップアップして、さらに詳しくURLとドメインの解説していきます。

そもそもURLって何?

URLは「Uniform Resource Locator(ユニフォームリソースロケータ)」の略で、日本語でいうと、「統一資源位置指定子(とういつしげんいちしていし)」といいます。 日本語にすると余計わかりにくい感じがしますが、インターネット上にあるホームページやファイルの「住所」やその情報を示すもののことをいいます。
ホームページアドレスがこれになりますね。

URLは「IPアドレス」を人間が覚えやすいように変換したもので、もともとの「IPアドレス」は数字を羅列したものです。 よく上げられる例はYahooJapanですが、「http://www.yahoo.co.jp」と「http://http://183.79.135.206/」は同じページに飛びますので、是非試してみましょう。

それでは、「サイト運営の用語辞典」で説明したURLの仕組みを、さらに細かく9つに分けて解説していきましょう。

URLの仕組み

プロトコル

プロトコルはウェブページなどで行う通信などを実行するためのルールのことを言います。
このプロトコルは、以下の様な種類があります。
・http…WebサーバーとWebブラウザの間でデータを送受信する
・https…「http」のルールに暗号化機能をつけ、セキュリティを強化したもの
・mailto…メール送信先を指定する
・ftp…ファイルをダウンロードする。

スキーム

スキームはプロトコルを囲む「枠組み」の様なものです。
「このURLはこのプロトコルのルールで通信します」というルールを規定する役割です。

ホスト名

ホスト名は、ネットワークに接続された機器やサーバー(ホスト)の名前を指しています。
よく目にする「www」もその一つです。
このホスト名も、今回のテーマである「ドメイン」とほぼ同じ役割で、こちらも人間がわかりやすいように置き換えられているものです。

余談ですが、「www」は「World Wide Web(ワールドワイドウェブ)」の略で、日本語に訳すと「世界中に張り巡らされたクモの巣」という意味です。

ドメインは先ほども説明した通り、人間がわかりやすく管理するために、ホスト名と同じく英数字の文字列に変換したものを指します。 インターネット上の住所ともいえる存在なので、同じドメインは存在しません。

ドメインは以下の細かく分けることができます。

サンプルでは「jp」の部分に当たります。
他にも「com」「net」などの文字列があり、それぞれの分野・領域に割り当てられたドメイン(gTLD)や、地域ごとにわけられたドメイン(ccTLD)があります。
「jp」は日本に割り当てられたトップレベルドメインです。

サンプルでは「co」に当たります。
このセカンドレベルドメインは、トップレベルドメインによって変わります。
「jp」では「co(commercial=商業)」や、「ne(network=ネットワーク)」などの種類を表すドメインが入ります。
また、先述にあった「com」や「net」は「サードレベルドメイン(後述参考)」がこのセカンドレベルドメインの位置にあるため、サードドメインがない場合もあります。

サンプルでは「sample」に当たります。
このサードドメインはセカンドドメイン以下に属するドメインです。
登録する文字列は、重複しない文字列に限り、設定することができます。

ディレクトリ

ディレクトリはwebサーバー内のフォルダ名と位置を表す部分です。
ひとつのホームページでも、1ページで完結するランディングページでもなければ、「会社案内」や「お問合せ」など複数のコンテンツがあるはずです。
ディレクトリはそれらのコンテンツを分類しまとめたフォルダがどこにあるのかを示しています。

例えば「ブログページで2017年の記事を表示したい」場合、下記の様なディレクトリになるのが一般的です。
「blog/2017/10」
上記のように、下層ページが増えるごとにディレクトリは増やすことが可能です。
一番左のディレクトリが一番大きい枠組みで、その中に2017年のフォルダが入っている事を表しています。
この「2017年」の部分はサブディレクトリと言い、「/(スラッシュ)」でフォルダを区切ります。

ファイル名

ディレクトリの中に収納されているファイルを指します。
URLの中では一番最後のゴールとなる場所です。
ファイル名は、htmlや、css、phpなどプログラムで書かれた文書ファイルやjpg、pngなどの画像など様々なファイルがあります。
このブログも「blog」というディレクトリの中にある、「20171020」というhtmlファイルです。

まとめ

いかがでしたでしょうか。
ドメインはどこの住所にサイトがあるのかを示し、URLは、その住所や番地、建物の名前や部屋番号まで、すべてまとめたものを指します。

また、ホスト名とドメイン名はどちらも登録した人が任意で決定することができます。
ですが、住所と同じように、全く同じドメインも存在しません。
横文字が多く、どうしても難しいように見えますが、実際の住所の仕組みと比較するとそんなに難しいことはありません。

SEOにも関わる話ですので、URLやドメインの仕組みはしっかりと理解しておきましょう。

2017年10月19日|カテゴリー「10月
お問合せのメールフォームが近年変わりつつあります。

と、言うのも、会社でお世話になっている取引先の方から、皆さんにも、紹介したい面白い申込フォームを教えていただきました!

その名も、
「フルオートメーション型ウェブ接客ツール qualva(クオルバ)」
全部オートメーションで接客してくれるの?!と興味が湧きませんか?湧きますよね!(笑)

今までの「メールフォーム」のイメージをガラッと変える革新的なお問合せツールなんですが、何が革新的かというと、このお申込みツール、チャット型なんです。

開発会社の株式会社Modulayが運営しているqualvaの公式サイトではもちろん、チャット型のお問い合わせフォームが導入されています。画面右下の「お問合せ」バナーをクリックしてみましょう。
なんだか某SNSの様な画面で、親近感がわくはずです。
このqualvaは、デザインや用途に合わせて自由にカスタマイズできるフォームで、お問い合わせフォームをはじめ、応募フォームや、アンケート、予約フォームまで作成が可能です。

会話方式で入力が進むので、選択肢や情報の入力がいつものメールフォームより、サクサクと進むイメージがありました。

Googleなどの世界的に利用されているサービスとも連携が取れるため、他のサービスと合わせて併用、ということにも便利にできるようです。
今まで億劫でメールフォームの入力まで至らなかったユーザーをゲットする為にとても画期的なツールではないでしょうか。
また、これなら親近感がわきやすく、訊き辛かったことまで気軽に入力できるかもしれません。

お客様と会社側の親密なつながりの為に、弊社でも導入を考えております!

もちろん、qualvaの公式ページで、導入を直接することもできますが、弊社からのお申込みも可能です。
ホームページのリニューアルや新規サイト制作の際に気軽にお問合せできますので、どうぞお気軽にお問合せください!

オキャクールオープン記念キャンペーン実施中!

初期費用無料キャンペーン
弊社は現在、オキャクールサイト オープン記念といたしまして、「ライトプラン初期費用無料キャンペーン」を実施中です!

ライトプランをご契約のお客様に限り、ライトプラン初期費用99,000円無料となります。

また、このキャンペーンに合わせ、スタンダードプランも初期費用299,000円のところ、199,000円の特別価格でご提供中です!

ホームページのリニューアル・新規設置なら今!
お気軽にお電話・メールフォームからお問合せください!

2017年10月17日|カテゴリー「10月
ページ速度が遅いわけとは?
ホームページの無料診断時にたまにあるのですが、表示が遅いなーと感じるサイトが結構あります。

「見ることができれば良いのでは?」と、考える方もいらっしゃるかもしれませんが、利用側に立って考えてみましょう。
調べ物や、ネット通販したい時に一つ一つのページ表示が遅いとどうでしょうか。

イラッときませんか?私はイラッときます。

Webページの表示が遅いと、ユーザーにストレスがかかってしまい、最悪、サイトから離れてしまうということも多々あります。
しかも、「ユーザーにストレスをかける」ということは、ユーザーファーストである検索結果の順位を決める「クローラー(検索エンジンにサイトの情報をデータベースに登録するプログラム)」にも影響が出るということです。

ではホームページの表示がなぜ重たいのでしょうか?
今回は表示速度が遅くなってしまう理由と、その対処法を考えてみましょう。

まずは自分のサイトを確認してみよう

とにもかくにも、まずは自身のサイトのことを知ることが必要です。
ページの表示速度を測るのは無料で簡単にできるので、まずはここからやってみましょう。

Googleアナリティクス

Googleアナリティクスを導入している場合は、[行動]→[サイトの速度]で確認することができます。
ページ別で読み込みの平均時間も確認できるので、利用してみましょう。

[サイトの提案]の項目では、具体的な改善方法が上がっているので、ホームページ修正に便利なツールになるはずです。

Page Speed Insights

こちらもGoogleが提供するツールです。
アナリティクスの[サイトの提案]で使用しているツールなので、Googleアナリティクスからも確認できますが、アナリティクスで導入していないWebページも確認することができます。
ページの表示速度が早いホームページなどを参考にする際は、とても有効活用できます。

結局ホームページが重い原因って?

自身のサイトの状況がわかったところで、よくある3つの原因と、その改善方法を考えてみましょう!

画像サイズが大きい

代表的な理由No.1と言ってもいいくらい、この原因が多かったりします。
意外と見落としがちな画像サイズ。みなさんは大丈夫でしょうか?

スマートフォンやデジカメで撮影したものを張り付けると、サイズがかなり大きい場合がよくあります。
画像サイズをリサイズしてみたり、掲載する画像を少し減らすなどして、ページが重くならないように対策してみましょう。

アニメーションの挿入

ページの中で、アニメーションが使用している場合、スクロールの途中で読み込みが遅くなってしまったり、Flashなどのツールを使用しているのが原因で表示速度が遅くなることも少なくありません。

Flashのサポートは2020年末で終了となっているため、html5への移行をしたり、そもそも、そのアニメーションは必要なのか、考え直しも必要かもしれません。

ホームページのレイアウトが複雑

少し専門的な話になりますが、メニューを表示させる動きなど、JavaScriptを使用しているサイトは少なくありません。
また、ホームページの配置自体が複雑でhtmlやCSSの記述が多くなってしまう場合も原因の一つと考えられます。

htmlやCSSは省略できる部分もあるので、一度プログラムを見直してみるのも良いかもしれません。

まとめ

Webサイトの作り方で、サイトの表示が大きく変わることも少なくありません。
技術的な部分がわからなくても、原因を知ることは解決への近道になります。
まずは自分でできること、画像サイズの変更や見直しなどから始めてみてはいかがでしょうか?

サイトが少しでも重いと感じたら、まずはどこが悪いのかを調査し、原因を発見することで、表示速度が遅いせいで離れていくユーザーがないように対策していきましょう!
pagetop