「美人」や「かっこいい」は曖昧な誉め言葉

友人から「凄い美人を紹介する!」と言われ、
期待をしていたら美人というよりは個性的な人だった。

とてもカッコイイ人と聞いていたのに、そうでもないなぁ~。

…ということありませんか?
このやり取り…合コンの裏話しとしてよくある会話なんだそうです(苦笑)

「美人」「カッコイイ」というのは誉め言葉として共通していても、その感覚は人それぞれ。ある程度の方向性は予測はできたとしても、必ずしも共通した認識にはなりません。この誤差を埋めるキーワードとしては「例えば誰に似てる?」これを聞いておけば自分の考える「美人」「カッコイイ」から外れていたとしても人物の想像ができます。

この曖昧な表現。人物に対してだけではなく、印刷物やホームページのデザインの現場でもよく使われます。

・キレイ ・エレガント ・クール ・シンプル ・シンプル ・豪華 
・にぎやか ・華やか ・ポップ ・ゴージャス ・優しい など

仕上がりのイメージを伝える際、上記のようなワードを使いますよね。

「綺麗な感じで!」と注文があった場合。

デザイナーはこの単語を元に、比較的狙ったターゲットの多くが「綺麗」と思えるようなデザインを考えていきます。デザイナーはイメージワードが一つだけだったとしても、それに沿ったデザインを制作可能ですが、冒頭で書いた「美人」「カッコイイ」と同様に、感覚の差を極力埋めたい場合には、自分が思っている「綺麗」を伝えるとよりイメージに近いものをデザインすることができます。また、何回か注文を繰り返しいただくと、お客様の好みや傾向がわかるので、修正作業も徐々に少なくなっていきます。もちろん、デザインに自信がない場合や、デザイナーの感覚が1番!!と思ってくださる場合には「綺麗な感じで!」だけの言葉でもOKです。

打ち合わせの現場で「例えばどんな感じですか?」と言われた時。

え?他のを参考にするの???と不審に思わず「感覚の差を無くす作業をしたいんだな」と、受けとめていただけると嬉しいです。

text-shadowで文字装飾

サイト閲覧ユーザー数ががパソコンからスマホにあたり…。以前は目立たせるためにも画像で作っていた見出しやタイトルをコーディングで作ることが多くなってきました。理由としては、画像を表示させるスピードよりも、文字の方が早いためサイト評価が高くなることや、スマホ・PCサイトと共通した画像を使う場合、PCでは読めるサイズで作ってもスマホでは読めない部分が出てきてしまうためです。
画像ではなく文章でタイトルが打ってあれば、改行位置や文字の折り返し市が変わったとしても読んでもらうことが可能です。読んでもらうことを目的としていますが、装飾がないと重要なポイントを目立たせることができません。
そこで、今回はいろいろやってみた、文字の装飾です。

これを見本に、文字の見せ方をいろいろカスタマイズしてみます。フォントサイズは25pxです。

浜松市・掛川市の
ホームページ制作
会社有限会社メルシー
浜松市・掛川市の
ホームページ制作
会社有限会社メルシー

同じフォントサイズの明朝です。止め・ハネ・線の強弱が出るので繊細な印象になります。
強弱が出るということは…文字サイズが小さくなった場合、読みにくくなる時もあります。
10pxの明朝は、明朝感が…

浜松市・掛川市の
ホームページ制作
会社有限会社メルシー
フォントサイズを最小の10pxにしています。
浜松市・掛川市の
ホームページ制作
会社有限会社メルシー
フォントサイズを最小の10pxにしています。

太文字にする指示を追加しました。綺麗に見えているでしょうか?
太文字にしたら書体が整って見えなくなるということが…日本語フォントの場合はよくあります。アルファベットに比べ文字数が多く、また画数も多いため、縦横斜めをすべて同じように太くすると文字が認識できなくなってしまうものもあります。そのため、1角ずつ線の太さが異なったりして、バランスが悪くなってしまうことも…。

浜松市・掛川市の
ホームページ制作
会社有限会社メルシー
浜松市・掛川市の
ホームページ制作
会社有限会社メルシー
浜松市・掛川市の
ホームページ制作
会社有限会社メルシー
浜松市・掛川市の
ホームページ制作
会社有限会社メルシー

文字に影をつけます。影を付ける指示は「text-shadow」を使います。「text-shadow:左右 上下 ぼかし具合 色;」という形で指示が出せます。
左右は元の場所を起点として、右がプラス・左がマイナス。
上下は元の場所を起点として、下がプラス・上がマイナス。
ぼかしは0~のピクセルで指定。色はコードでもRGB値でも入力可能です。濃度の調整をすることも多いので、個人的にはRGBAで入力していることが多いです。

浜松市・掛川市の
ホームページ制作
会社有限会社メルシー
浜松市・掛川市の
ホームページ制作
会社有限会社メルシー
浜松市・掛川市の
ホームページ制作
会社有限会社メルシー
浜松市・掛川市の
ホームページ制作
会社有限会社メルシー

上記のtext-shadowをふまえて………。
弊社のデザイナーさんと打ち合わせの際、文字の装飾がどこまでコーディングで表現できるかという話しになりました。上にあるような作業は頻繁に使うので実装しているものもあるのですが、やれるかどうか試してみよう!ということで、text-shadowを駆使して使えそうなものから使えなさそうなものまで、チャレンジした記録です!

囲い文字にチャレンジ。 1pxずつ上下左右にぼかしのない赤の影(ぼけてないので線ですが…)を実装

浜松市・掛川市の
ホームページ制作
会社有限会社メルシー
浜松市・掛川市の
ホームページ制作
会社有限会社メルシー

線を太くできないかということで…1pxのズレを5pxに変更したら…とんでもないことに!

浜松市・掛川市の
ホームページ制作
会社有限会社メルシー
浜松市・掛川市の
ホームページ制作
会社有限会社メルシー

ぼかしながら使えば、不安を煽るような文字効果としては使えなくも…ないかも?

浜松市・掛川市の
ホームページ制作
会社有限会社メルシー
浜松市・掛川市の
ホームページ制作
会社有限会社メルシー

囲えるなら、文字の色を背景色にして抜き文字もできるだろ!とチャレンジ。黒背景の方はいい感じに見えますが、右側は危うい気がします…

浜松市・掛川市の
ホームページ制作
会社有限会社メルシー
浜松市・掛川市の
ホームページ制作
会社有限会社メルシー

影は何枚でもつけることが可能で、それぞれ色やずれ方を指定できます

浜松市・掛川市の
ホームページ制作
会社有限会社メルシー
浜松市・掛川市の
ホームページ制作
会社有限会社メルシー

影の位置、ぼかし方、背景の色、フォントの色などを組み合わせていけば、いろいろな文字装飾ができそうです。(綺麗に読ませることができるかは別として)画像に頼らずコーディングでタイトルを作っていくと単調になりやすいので、チャレンジをして使えそうなデザインを増やしていきたいです!

何が原因??あなたは文字化けする文字を知ってますか?

メールの送受信をした際、届いたメールの一部が文字化けしていたり、

圧縮ファイルを解凍したら読めない文字の羅列なってしまったりしていたことはありませんか?

友達同士や社内であればあまり気にせず使っていることもありますが、

お取引先への連絡や、失礼があってはいけない人に文字化けした内容を送らないように、

送信する側からある程度の対策をとることが可能です。

文字化けの原因は1つだけではなく、いくつかの原因が考えられます。

その中でもよくある原因の一つに 機種依存文字 があります。

その名の通り、機種に依存した文字・記号なので、別機種のパソコンで正しく表示することが困難という現象です。

WindowsとMacがこの関係にあたります。

Windowsで丸に囲まれた数字(記号)、まるいち、まるに、まるさん………と入力して送信すると

Macで受け取った場合はローマ数字 I、II、III となって相手に届きます。

どちらも数字なので、意味合い的には同じになりますが、例えばお互いに自分のパソコンを見ながら

電話で打ち合わせをしていた場合「丸2の件に関して…」と言うと、それが通じなかったりします。

数字の他にも(株)や(有)、単位なども機種依存文字に該当します。

社名の前にこれらの文字を入力する場合、機種依存文字にならないよう、

括弧と漢字で表記するように気を付けてください。

機種依存文字については、どの文字が文字化けするかをリストアップしているサイトもあるので

相手に失礼がないように、そしてパソコンの知識がない人と思われないためにも

是非検索で調べて、確認してみてください。

illustratorを使う時に最低限覚えたいショートカットキー

Illustratorの作業を効率よく行うにはショートカットを覚えることが必須です。
特にデザインの現場ではモニターが大きいので、ショートカットキーを覚えずに、マウスでアイコンまで移動するのも一苦労。一日作業をしていると腱鞘炎のような状態になってしまうこともあります。

覚えれば便利なショートカットキーですが「無数にありすぎて全部覚えられない!」「どこから覚えていいのかわからない」という声もよく聞きます。よく使うもの、覚えやすいものから行くのがおすすめですが、何がよく使うショートカットかわからない人の為に、個人的によく使う&覚えやすいショートカットキーと、その覚え方をまとめてみました。

◆コピー・貼り付け・切り取り◆

Ctrl + 
コピー Copyの頭文字。

Ctrl + 
貼り付け コピーショートカットの右側なのでセットで覚える。

Ctrl + 
コピーした場所の真上に張り付け 「C」コピーショートカットの(斜め)上に位置する「F」

Ctrl + 
コピーした場所の真下に張り付け 「V」貼り付けショートカットの右側

Ctrl + 
切り取り コピーショットカットの左側。

◆操作の頭文字から予想できるショートカットキー◆

Ctrl +  全て選択 All

Ctrl +  保存 Save

Ctrl +  グループ Groups

Ctrl +  連結 Joint

Ctrl +  新規 New

Ctrl +  開く Open

Ctrl +  プリント Print

Ctrl +  閉じる Quit

Ctrl +  拡大表示

Ctrl +  縮小表示

◆よく使うから覚えたいショートカットキー◆

Ctrl + 
1つ前の状態に戻す アルファベットの一番最後のキー。前にしかアルファベットがない

Ctrl + 
アウトライン 「yarn(糸)」の頭文字?

Ctrl + Shift + 
オブジェクトを最前面へ 鉤括弧の閉じる記号。これより背面は無い。

Ctrl + Shift + 
オブジェクトを最背面へ 鉤括弧の始まる記号。これより全面は無い。

学生の頃、歴史の年号をゴロで覚えたのを思い出します(苦笑)まだまだたくさんのショートカットキーがありますが、まずは覚えやすいところから。少しずつ覚えるだけでも作業の効率はアップできるので是非使ってみてください!

見慣れすぎてあまり注目されない!?アイコンのデザイン

アイコンとは?「物事を簡単な絵柄で記号化して表現するもの。」(Wikipedia)

パソコンやスマートフォンにはアプリやソフトを起動させるためのアイコンがたくさんありますよね?
このアイコン、実は少しずつではありますがデザインに変化があることに気付いていますか?
日頃あたり前のように使っていると変化に気が付きにくいものですが、デザインを気にする人はこのアイコンを見るだけで、「古いな」「新しいな」と感じたりもします。

 

そもそもアイコン見慣れたアイコンデザインをリニューアルする意図とは?

大幅デザインに変わってしまうと、利用者の混乱を招いてしまいます。けれどせっかくソフトやアプリががリニューアルしたのに、アイコンは以前と全く変わらない。これでは新しさをアピールすることができません。そこで、見た目を微妙に微妙にデザインしながらアイコンを変化させています。

ではアイコンデザインの流行は?

例えば多くのユーザーがいるWindowsの新しいバージョンが出るタイミング。Officeの新バージョンリリースのタイミングなど、多くのユーザーが使うツールが出た時、関連ソフトのアイコンがリデザインされます。バージョンアップする前のデザイン(効果)は、一世代前という認識になっていきます。これから新しいアイコンを作ろうと思った時、一世代前のデザインをうっかりしてしまうと、あれ?今っぽくないな???となってしまうのです。

また、デザインという意味で…デザインの仕事をする人が多く利用するAdobe系のアイコンもよく注目されます。
アイコンは普段当たり前のように使うので、デザインに注目される事があまりないのですが、意外といろいろな表現をしているのでデザインの参考になります。新しい機能を使ったデザインで新鮮さを出したり、多くのユーザーに認識してもらえるようなデザインであることも大切です。サイトのデザインは紙面よりも早いので、古いデザインになってしまわないように、デザインのリニューアルも大切です。

 

文章の右側の縦列を綺麗にそろえたい。

Wordやイラストレータには、長文文章の左右を綺麗に揃えてくれる「均等割り付け」という機能があります。ボタン一つで整えてくれるのでとても便利な機能です。ホームページも当然できるだろうと調べてみたところ「text-align」という、文字の配置を左寄せ・中央・右寄せする指示の中に「justify(均等割付)」がありました!早速実装してみると、右側が綺麗に揃っていなかった長文がキッチリ揃っているではないですか!もっと早く実装しておけばよかったなぁと思っていたところ、お客様から「揃ってないですよ」とのお言葉が???普段私はchromeを使用しているのですが、IEでは今も「text-align:justify;」だけでは綺麗に揃ってくれないようです。

IEのみ、文章の右側が縦に揃っていません

浜松・掛川のホームページ制作会社メルシーでは、紙面広告からインターネットまで幅広くあなたの会社を支援します。気軽にご相談ください。浜松・掛川のホームページ制作会社メルシーでは、紙面広告からインターネットまで幅広くあなたの会社を支援します。気軽にご相談ください。浜松・掛川のホームページ制作会社メルシーでは、紙面広告からインターネットまで幅広くあなたの会社を支援します。気軽にご相談ください。浜松・掛川のホームページ制作会社メルシーでは、紙面広告からインターネットまで幅広くあなたの会社を支援します。気軽にご相談ください。

そこで同じ箇所に記述を増やします。「text-justify:inter-ideograph;」を追加するとIEやEdgeも右側を揃えることができるそうです。日本語のように全角の文字、中国語やハングル文字もこれで大丈夫そうでした。text-justifyを調べてみると言語による行端揃えを調整するCSSとのこと。

「text-justify:inter-ideograph;」で実装

浜松・掛川のホームページ制作会社メルシーでは、紙面広告からインターネットまで幅広くあなたの会社を支援します。気軽にご相談ください。浜松・掛川のホームページ制作会社メルシーでは、紙面広告からインターネットまで幅広くあなたの会社を支援します。気軽にご相談ください。浜松・掛川のホームページ制作会社メルシーでは、紙面広告からインターネットまで幅広くあなたの会社を支援します。気軽にご相談ください。浜松・掛川のホームページ制作会社メルシーでは、紙面広告からインターネットまで幅広くあなたの会社を支援します。気軽にご相談ください。

よーし!これで全部綺麗に揃うぞ………と言いたいところなのですが、この「text-justify」という仕様、まだW3Cの正式な仕様にはなっていません。なので、今これを実装しても今後使えない(適用されない)可能性があります。
また、このコード、半角英語では字間が開きすぎて読みにくくなるということもあります。(日本語のような全角文章を想定した記述な為。)

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
浜松・掛川のホームページ制作会社メルシーでは、紙面広告からインターネットまで幅広くあなたの会社を支援します。気軽にご相談ください。

お客様に書いてもらうブログにもこのタグを実装することもできるのですが「半角英字が入ると崩れる可能性」「今後ブラウザのバージョンアップ等でレイアウト崩れるかも」…というリスクを理解してもらわなくてはいけません。

学生時代、私は英語が大の苦手だったので、ホームページ制作の仕事を初めたばかりの頃は「コードやタグも日本語ならいいのに…」と思っていたのですが、今では日本語の厄介さと戦うことに…。文章を読みやすく、美しく見せたい!インターネットの上では全角半角がミックスしたり、ひらがな・カタカナ・漢字の入り乱れる日本語はとても微妙な言語なようです。

Chromeの標準仕様に従うサイトデザイン

先週はフォントサイズについての記事を書いたのですが、各サイズのサンプルを作りブログを表示させて吃驚!5px~20pxで文字のサイズを並べたはずなのに、10px以下は全部同じように表示されてるじゃないですか!?

■chrome
■IE・Firefox

ディングのミスかな?と思ったら………原因はgooglechromeの仕様にありました。chromeの仕様では10pxが文字の最小サイズという仕様にしているため、通常使われる文字サイズ指定の方法だと10px以下は強制的に10pxになってしまいます。その為、chrome用に別の文字サイズ指定方法をするという記述が必要になります。ブラウザによっておこるデザインの崩れのいい例みたいな感じにですね(苦笑)では、この10px以下になるような記述方法を………と、続けたいところではあるのですが、今回は方法ではなく、10px以下になってくれない根本について。

何故10px以下と指定しているのに10px以下に表示してくれないの?

それはgoogle(chrome)側としては10px以下は小さくて読みにくいよね。だから読めるサイズでサイトを作りましょう!………というような意図(憶測ですが)。
そして、googleが意図しない検索サイトを表示させないため…というのもあるのかな?と思います。

chromeの開発元はgoogle。ネットで検索といえばGoogleを使う方が多いですよね。googleとしては今後も他の検索エンジンを使われないために、検索した単語で精度の高い検索結果を表示させたいと思っています。ホームページのタイトルやディスクリプションといった検索画面に表示される文章。そのページ内に記載されているタイトルや本文を検索ロボットが確認。多くの人に見られているサイトや、閲覧している人の地域に合わせて検索結果を表示するように開発をしています。

そして掲載される側。こちらはその検索上位に自分のサイトが掲載されるようにしたいと思っています。その為にタイトルやディスクリプション、見出しや本文に検索してくれる人が来てくれるような単語や文章を考えて記載していきます。ほとんど文章が無いページというのは検索としてもヒットしにくくなります。………ということは、逆に文章がたくさんあれば、検索のワードがたくさんあればGoogleの検索に引っかかりやすくなるのでは?←このような悪だくみができなくもないのです。多くの人が検索するであろう単語をたくさん集めてサイト内に表示させれば、単純に考えて検索されるワードとして検索上位になる可能性を含んでしまうのです。
でもサイト内の記事に関係ない単語を、閲覧者には見せたくないですよね?そこで、文字サイズを1pxなど読めないサイズに設定をし、サイト内の目立たないエリアに設けたらどうでしょう?←これを防ぐために10px以下も強制的に10pxにしている…とも考えられます。

IE・chrome・FireFox・safariなど、ブラウザは様々ありますが、chromeは開発元がGoogleなのでchromeで標準とされていることは、Googleの検索エンジンで標準と考えている範囲内となっていると思います。仕様となっていること以外の表示もコーディングですることは可能ですが、仕様内で作る、考える、これも検索対策として必要なことだと思います。

ホームページで使うフォントサイズはどれくらいが見やすい?

ホームページで使用するフォントのサイズは、サイトの作成時に設定をすることができます。
サイズ指定せず作成すると、各ブラウザが標準としているサイズで自動的に表示されます。
サイズ指定無しで表示されるサイズはブラウザ側が読みやすいサイズとして設定しているものでもあるので、敢えて指定をせずに、ブラウザに決めてもらうのも悪いことではありません。…が、このブラウザが標準としているフォント標準は主に英語を基準に考えられているため、日本語のような全角、そして画数が多い言語に対して、必ずしも読みやすいとはならないのが難点です。
その為、サイトを制作する時にはデフォルト値にまかせず、コーディングでフォントサイズや行間の指定をしていきます。フォントのサイズはサイトを見てほしいターゲット、デザインなどに合わせて決めていきます。

フォントサイズサンプル

ホームページで使うフォントサイズはどれくらいが見やすいか?
読みやすいサイズを確認してみよう!!
Confirm text size!!  Font Size 4px

ホームページで使うフォントサイズはどれくらいが見やすいか?
読みやすいサイズを確認してみよう!!
Confirm text size!!  Font Size 6px

ホームページで使うフォントサイズはどれくらいが見やすいか?
読みやすいサイズを確認してみよう!!
Confirm text size!!  Font Size 8px

ホームページで使うフォントサイズはどれくらいが見やすいか?
読みやすいサイズを確認してみよう!!
Confirm text size!!  Font Size 10px

ホームページで使うフォントサイズはどれくらいが見やすいか?
読みやすいサイズを確認してみよう!!
Confirm text size!!  Font Size 12px

ホームページで使うフォントサイズはどれくらいが見やすいか?
読みやすいサイズを確認してみよう!!
Confirm text size!!  Font Size 14px

ホームページで使うフォントサイズはどれくらいが見やすいか?
読みやすいサイズを確認してみよう!!
Confirm text size!!  Font Size 16px

ホームページで使うフォントサイズはどれくらいが見やすいか?
読みやすいサイズを確認してみよう!!
Confirm text size!!  Font Size 18px

ホームページで使うフォントサイズはどれくらいが見やすいか?
読みやすいサイズを確認してみよう!!
Confirm text size!!  Font Size 20px

4px~20pxでサンプルを作ってみました。どのサイズが見やすいでしょうか?
このページを見ている閲覧環境(PC・タブレット・スマホ等)によって、見やすいと感じるものはそれぞれ違うと思います。サイトの更新や、制作の際、このサイズがいい!など具体的な指示があれば参考にしてみてください!

………次回のブログは、chromeさんの10pxの壁について書きます!

使って便利!Chromeの拡張機能

前回のブログで使ったGoogleChromeの拡張機能!パソコンでLINEができる機能を追加してみました。が、便利な機能はこれに限らず、とってもたくさん用意されています。今回はそんな便利機能の中から、自分も使っていたり、人に紹介することの多い便利な拡張機能を5個紹介します。

Google Mail Checker – メールの受信をお知らせする

登録したGmailの受信ボックスに届いたメール件数をアイコンで表示してくれる機能です。わざわざGmailを開かなくても受信が確認できる為、他の画面を開いて作業していてもメールの受信に気づくことができます。

SearchPreview – 画像プレビューを表示させる

検索結果の表示に、ページのプレビュー画面を表示させてくれる機能です。検索はサイト内の文字から該当するサイトを表示させるのですが、拡張機能を入れていない段階では視覚的な判断ができません。ビジュアルとして表示されれば見やすいので、おすすめです。

Calculator – 電卓

手元に電卓はないけれど、電卓を使った計算が緊急で必要な場合、chrome上で電卓を使うことができます。アプリでは「scientific-calculator.appspot.com」が提供している「電卓」アプリが、テンキー入力も可能で使いやすいです。

ColorZilla – 色を調べる

サイト内で使われている色を調べる機能です。スポイトのアイコンをクリックし、調べたい色の上にマウスを持っていくと、RGB値や16進数で色を表示してくれます。

Page Ruler – サイズを調べる

サイト上で指定したエリアのサイズを確認することができる機能です。ドラッグするエリアは画面上で自在に指定することができます。横幅・高さはもちろん、そのエリアが上下左右からどれくらい離れた場所になるかの座標も確認可能です。

この他にも様々拡張機能が用意されています。ネットの機能は全世界共通なので「あったらいいのに」の機能は誰かがすでに用意してくれていたりします。こんな機能があったら便利なのに?と思ったら、拡張機能にあるか検索してみるのもお勧めです。

同じような機能が複数あった場合には、評価やレビューの数、また日本語対応しているかなどを判断しながら、自分が使いやすいようにカスタマイズしてみてくださいね。

パソコンでLINEをやろう!

前回のブログではGoogleドライブにある機能でWordやExcel、PowerPointのような機能を備えたツールを紹介しました。今回もGoogleつながりでgoogleのブラウザ、chromeにある便利機能をご紹介します♪便利機能のことを「拡張機能」と言い、これを追加することでいろんな機能が使えるようになります。拡張していない状態はシンプルで使いやすいのですが、これを入れると便利なこともたくさんあるので、必要なものを使ってみてくださいね。

今回紹介するのは、この拡張機能の中から、パソコンでLINEをできるようにする方法を紹介します。すでにLINEアカウントを持っている場合、既存のアカウント情報でログインすればグループもトーク内容も見ることができます。

普段IEやFireFox、safariでサイトを見ていて、chromeがない人は、検索からchromeのサイトに行き、ダウンロードしてください。ダウンロードしたchromeを起動させて、googleのトップ画面を表示。右上のログインからgoogleアカウントにログインします。

ブラウザの右上、●が3つ縦に並んだマークがあるのでクリックしてみてください。開いたメニューから[その他のツール]-[拡張機能]をクリックします。

画面の下の方に[他の拡張機能を見る]というボタンがあるのでクリックします。

こちらの画面から、chromeに様々な機能を追加することができます。
今回はchromeに「LINE」の機能を追加してみます。検索窓に「LINE」と入力します。
※「LINE it!」というものが上部にありますが、下にあるアプリの「LINE」なので要注意!

検索結果のアプリの欄に「LINE」が出てくるので右側のボタン「CHROMEに追加」をクリックします。

chromeの左上にある「アプリ」のアイコンをクリックします。メインエリアにLINEのアイコンが出てくるので、ダブルクリックでLINEを開始することができます。

余談ではありますが…LINEはパソコンでもできるんだよ!と、20代前半の方にドヤ顔で教えたところ「パソコンよりスマホの方が文字入力早くありませんか?」と真顔で言われてしまいました。スマホ世代凄い!!!!!
私はポケベル世代・・・・・

Googleアカウントを持っているならおすすめ!Googleドライブを使ってみよう!

ここ数日の間で、googleドライブを紹介するような機会が何件かありました。googleドライブ、皆さんは使ったことありますか?

Googleといえば「ググる」なんてスラングもあるほど、ほとんどネットに触らない人でも「Google」は聞いたことがあると思います。仕事やプライベートでネットを使う人ともなれば、「Google検索」「Googleマップ」「Gメール」など、Googleを全く使わないという方がむしろ難しいくらいです。

そんなGoogleが提供しているサービスの中に、Googleドライブというものがあります。

Googleドライブ
https://www.google.com/intl/ja_ALL/drive/

サイトに行くと「すべてのファイルに、どこからでもアクセス」とあります。簡単にわかりやすく説明をしてしまうと、Googleドライブで作ったデータをGoogleドライブで保存しておけば、どこからでもそのファイルを見ることができる!という感じです。

例えば…Excel2013で作成したファイルがあったとします。
それを自分以外の人にも編集してもらい共同管理したいと思った場合、作ったファイルを相手に渡し、編集してもらったら送り返してもらうという手間があります。また、当然相手のパソコンにもExcelのソフトが入っている必要があります。Excelのソフトが入っていたとしても、バージョンが違って見られないという問題がおきる場合もあります。
ソフトを買ったり、共同編集できる場所を確保したりと、たった一つのファイルを共有するのにお金がかかったり、手間や時間がかかりますよね?

そこでGoogleドライブの登場です!
Googleのアカウントがあれば「15 GB の無料容量でご利用を開始していただける」とあります。上記のURLからログインをして「新規」をクリックします。すると何を新規で作るか選択できるようになっています。
・Googleドキュメント
・Googleスプレットシート
・Googleスライド
とあります。聞きなれない言葉で、何ができるかわかりにくいのですが、クリックした画面を見ればわかる方も多いと思うので、それぞれの画面を紹介します!

 

 

 

・Googleドキュメント

・Googleスプレットシート

・Googleスライド

 

似たような画面、見たことありませんか?
ワードやエクセル、パワーポイントに近い機能が備わっています。
もちろん細かな性能や使いやすさなど、本家にはかなわない部分も多くありますが、無料で使えてソフトのバージョンを気にしなくてもいいという点。そして、ここに保存をしておくと、ファイルごとにこのファイルを共有で閲覧編集できるすることも簡単にできてしまいます。

さらにGoogleドライブはスマホアプリでもあるので、iPhone・Androidからでも使えます。

この他にも聞きなれないけど見たことのあるような機能があるので、怖がらずにまずは使ってみると面白いですよ!

相対値と絶対値について

ホームページのコーディングの際、記述している場所が相対値なのか絶対値なのかは重要です。
フォントサイズやボックスの大きさなど、様々な場面で使うことがあります。

【相対値】比較の対象があり、それとの差において計られた値い。
【絶対値】基本の数値に対しての値い。

相対値 % em

文字のサイズは10pxで設定しています。

文字サイズ150%と指定。
10pxの1.5倍になるので15pxで表示されます。

文字サイズ200%と指定。
15pxの2倍になった文字を200%で表示するので30pxで表示されます。

絶対値 rem

文字のサイズは10pxで設定しています。

文字サイズ1.5remと指定。 10px1.5倍になるので15pxで表示されます。

文字サイズ2remと指定。 絶対値は元となるサイズ(10px)からの指定なので、10pxの2倍で20pxで表示されます。

最近ではremも見かける頻度が高くなりましたが、em・px・%がいまだに多くのサイトで使われています。どの単位も無くなると不便でもあるので、統一してしまうとそれはそれで困ってしまうのですが、個人的にはremの方がわかりやすく、使いやすく感じるのでおすすめです!

ホームページで文字サイズ指定をする単位について

今回のブログではホームページで文字サイズを指定する方法について書きます。

色の指定同様、文字サイズを指定する方法も様々あり、初めてコーディングに触れる人に「どれを覚えたらいいですか?」と言われます。自分で一から作る場合には、自分のルール内で使いやすい指定方法を利用してもかまわないのですが、修正や更新をするような場合にはすべての特徴を知っておくことが必要です。
ここに書き出す記述も一部ではあります。また、今後新たな単位も増えたり、流行が移り変わる可能性もありますが、主だったものを紹介します。

ピクセル px

サイト制作現場でも長い間使われている単位で、現在でもよくみかけます。指定した単位で必ず表示されるため、レイアウトがしっかりと決められた場所の中で、文字数の変更があまり内容な場所では大変使いやすい単位です。

ポイント pt

DTP(紙面)の文字サイズで使用していた単位です。サイト上では一般的に多く使われる単位ではないのですが、印刷させることを想定したページ(サイト)では使うこともあるようです。

単語による指定

文字色を指定する際に赤は「#ff0000」「rgb(0,255,255)」「red」の3種類指示方法があります。フォントサイズの単語指定は「x-small<small<medium<large<x-large」というような形で指定ができ、mediumを基本に1.2倍のサイズ変更があります。昔はこの指定方法も多くみかけましたが、文字数的にも単語で指定するよりは数値の方が短いことなどもあり、積極的に使われることはなくなってます。

パーセント %

基本サイズに対して、パーセントで文字サイズを決定することができます。基本となるbodyに15pxを指定し、bodyに囲まれた範囲内で文字サイズ200%と指定すると、200%の支持を記述した場所は30pxで表示されることとなります。

エム/イーエム em

一般的には見慣れない、聞きなれない単位かもしれませんが、コーディングでは比較的見ることの多い単位です。使い方はパーセント(%)とほぼ同じで「100%=1em」「150%=1.5em」というような使い方をします。使い方は一緒なら%で統一してほしいところですが、emという単位にはこれと似たような性質を持つ単位remがあります。

レム/アールイーエム rem

emとほぼ使い方は同じ、文字サイズの単位です。15px=100%=1em=1remは基本的に同じサイズになります。emとの違いは、emは相対値、remは絶対値として使用します。コーディングにおける相対値と絶対値の説明は、次回詳しく紹介します。

ホームページで色の指定をする方法

サイトで色を指定する場合「16進数」「RGB値」「色名指定」等、複数の方法が存在します。どの方法でも同じように色を表現できるので、この違いは何?と質問されることがあるのですが、時代と共にブラウザが順次対応できる範囲を広げただけなので、どの方法でも間違いではありません。ただ、色名指定<16進数<RGB値の順で表現できる色の範囲は広がるので、広範囲の色表現できるのはRGB値です。

様々なサイト修正を行った経験から傾向を見ると、古いサイトは「色名指定」、比較的新しいサイトは「16進数」が多いように思います。また、最近ではRGB値を使ったサイトも増えてきています。

色名指定

色の名前を直接記述する方法です。赤色を使う場合には「red」青の場合は「blue」というように指定します。昔から使われていた方法で、色の名前と英語がわかれば使えるので、他の2つに比べてわかりやすいのですが、微妙な色や、色名がわからないと使えないという不便さがあったり、知っている色名の中からデザインをしていくと単調になりやすくなります。

【サンプル】
Red:色の指定方法★
Blue:色の指定方法★
Green:色の指定方法★
Tomato:色の指定方法★
MediumSlateBlue:色の指定方法★
LightSeaGreen:色の指定方法★

16進数指定

16進数の色指定は色を 0~9+A~F の16段階のRGBで色を指定する方法です。#シャープのマークの後、6文字で色を指定できます。RGBは光の三原色で色を表現しています。光りの三原色の場合、色を重ねる程に明るい色になり、全く色をつけないと黒になります。0という数値は全く色を使っていない状態、数字が大きくなるほど、色の使用量が多くなります。0→9→A→Fというように、0は光を使っていない状態、Fが一番強く光を使っている状態です。
そして#マークの後にくる6文字の指定は以下の通りです。

# 00 00 00
左R(レッド)中央G(グリーン)右B(ブルー)
赤色の指示をしたい時には「#FF0000」
青の指定は「#0000FF」と記述します。
【サンプル】
#000000色の指定方法★
#110000色の指定方法★
#220000色の指定方法★
#330000色の指定方法★
#440000色の指定方法★
#550000色の指定方法★
#660000色の指定方法★
#770000色の指定方法★
#880000色の指定方法★
#990000色の指定方法★
#aa0000色の指定方法★
#bb0000色の指定方法★
#cc0000色の指定方法★
#dd0000色の指定方法★
#ee0000色の指定方法★
#FF0000色の指定方法★

RGB値で指定

他の二つに比べて、一番新しい色の指定方法です。上記16進数と同じようにRGBの指定プラス使用している色を半透明にすることもできます。文字色の指定で使うことは少ないですが、背景色ので使いやすい指定方法です。今まで一般的に使われていなかったのは比較的新しい指定方法なことと、ブラウザによっては対応していないものもあった為、積極的には使われていませんでしたが、Dreamweaverのデフォルトで使えるようになったこともあり、最近のサイトでは使われていることも多くなってきました。色の指定はしやすく、透明度も指定できて、この方法がベストのように感じるかもしれませんが、この方法は上記に比べて記述が長くなるため、記述数を極力最小にしたい場合(サイトの表示スピード)には適しません。必要な箇所のみこの方法を取る…というのが現在は多いように思います。

rgba(255,0,0,0.5)  括弧の中(赤,緑,青,濃度)
0<255で色の数値を記述。濃度は1=100%、0.5=50%
【サンプル】
255,255,255,1色の指定方法★
0,255,0,0.8色の指定方法★
255,0,0,0.6色の指定方法★
255,255,0,0.4色の指定方法★
550,50,50,0.2色の指定方法★

スーパーリロード

ブラウザをスーパーリロードしてください!

…と、言われて、何のことだかわかりますか?

ホームページの更新依頼を受け、作業の確認をする際、時々このようなお願いをする場合があります。リロードとは、再読み込み。サイトをもう一回読み込み直してもらう作業です。IEでは「F5」のキーボードを押してもらったり、その他のブラウザではURLが記述されている左右に、円状の矢印ロゴがあるので、それをクリックしてもらうことでサイトを再読み込みをしてもらうことができます。

で、スーパーリロードとは?

キャッシュってご存知でしょうか?そもそのキャッシュって?という方のために、簡単に説明します。サイトのキャッシュと言うのは閲覧履歴のようなものです。一度見たサイトは通常、自分のパソコンに閲覧履歴を残すようになっています。一度見たサイトを再度見る際には、新たにそのホームページを表示するのではなく、閲覧から表示しています。何故こんな方法をとっているのかと言うと、ホームページを閲覧する際、なかなか表示されなかったり、動きが鈍いとイライラしませんか?閲覧記録があれば、一度すでに読み込んだ情報なので、すぐに表示してくれることができます。最近のパソコンではあまり動作が遅い…と感じることはありませんが、十数年前までは電話回線でネットをつないでいたり、パソコンのメモリが少ないという事情もあった為、各ブラウザやサイト制作をする人はキャッシュの機能を上手く利用して、極力スムーズにサイトを表示できるようにしてきました。

リロードをして再読み込みをしたつもりでも…実はこのキャッシュの機能が強すぎて、新しい情報で表示してくれない場合があります。

文章の修正やHTMLタグと言われる部分についてはリロードで更新するのですが、一部画像の履歴や、デザインを指定しているCSSは過去に読み込んだものを再度表示してしまうのです。そのため、サイトを更新し確認をお願いしたけど、表示が変わってない?となってしまう事に…。
そこで試していただきたいのがスーパーリロードです。

IE/chrome/Firefoxの場合 [F5]+[Shift]

上記のキーボード操作をしていただくとスーパーリロード完了です。画像やCSSも再読み込みをしてくれます。是非試してみてください。

RGBカラーとCMYKカラーの違い

デザインを制作する際に、デザイナーは最初に何に使うデータなのかを確認します。「どちらで使うかわからないから、どちらでも使えるようにしてほしい」と言われることもたまにあります。実はこの返事だと若干困ってしまう時があるので、デザインを制作する側から何故確認するのかを説明します。

紙面用のデータを制作する際にはCMYKカラー
Web用のデータを制作する際にはRGBカラー

簡単に言ってしまうと、紙面とWebでは使える(表現できる)色の種類が異なっています。

CMYKカラーは、シアン・マゼンタ・イエロー・ブラックの4色のインクを混ぜて色を表現します。水彩絵の具をイメージしていただくとわかりやすいと思うのですが、色を混ぜるとどんどん暗い色になっていきます。

RGBカラーはレッド・グリーン・ブルーの光りを混ぜて色を表現しています。こちらは舞台などで使われるライトをイメージしてください。光を重ねて当てるほど、色は明るくなっていきます。

CMYKとRGBの場合、より多くの色を表現できるのはRGBカラーになります。CMYKはRGBに比べて表現できる色の範囲が狭いです。写真を撮影した場合、写真のデータはRGBで撮影されています。けれどそれをプリンターで印刷する際にはCMYKのインクを使います。その為、実際に撮影されている写真に比べて色が悪いように感じる…ということがおきてしまいます。このような事があるので、デザイナーは印刷用のデータを作る際には、事前にCMYKで出すことを想定して補正をおこないます。
また、印刷所の方でも色校を出して、実際に印刷される色に間違いがないかを確認するということもあります。(※色校は別途料金が必要な印刷所が多いです)

CMYKで表現しにくい色としては、鮮やかな色・明るい色が多いです。
下記の画像のようにRGBでは鮮やかな色を表現できるのですが、印刷をすると右側のような色になってしまいます。


また黒の場合も、黒を100%で指定しただけでは真っ黒とはなりません。(若干赤みがかかった色になっています。)そこで印刷用のデータでは、黒の色指定の他にCMYにも色指定を入れてべた塗り(黒)を表現します。

ブラウザは何を使っていますか?

パソコンのブラウザ。皆さんは何を使用していますか?
IE・chrome・Firefox・Edge・Safari等々いろいろな種類があります。
Windowsのパソコンにはデスクトップ上にIEのアイコンがおいてあった時期も長く、IEを使っているユーザーが海外に比べて多いのですが、chromeの利用者もかなり多くなってきています。またwindows10からはEdgeも利用される方が徐々に増え始め、ブラウザによってバグやエラーが発生するコーダーとしては「統一してくれないかな」なんて、思ってしまうこともあります。
コーダーとしてはそれぞれの特徴を知っておかなくてはいけないのですが、普段使いなれたブラウザから他のブラウザを試してみようと思うタイミングはなんでしょう?
私の場合…一番最初はIEを利用していました。多くのユーザーが使っていて、カスタマイズ方法についても様々検索できましたし、そもそもデスクトップにあったのでそのまま使えたというのが理由の一つです。次に使ったのはSafariです。パソコンを買い替えたことが理由で、IEが使えなかった為自然とSafariに移行したのですが、ちょうど購入したタイミングでOSとSafariの間に不具合が。他のブラウザを使うようにニュースにもなっていたのでChromeを使うことになりました。
その後、FTPソフトが無いパソコンでFTPを触らなくてはいけない機会があり、FireFTPを使ったり、サイトの検証では今でもIEを基準とすることが多いため、IEは必須。結局どのブラウザも少しずつ利用しています。

◆IE/Edge
開発元がwindowsのMicrosoftなので、windowsで正しく読み込むという意味では最適

◆Mozilla Firefox
拡張機能「アドオン」が数多く用意されているため、開発やシステムを担当する人はマニアックにカスタマイズできます。

◆Safari
MacOS標準ブラウザ。iPhone/iPadもSafariを基本としたブラウザがあるため、アップルユーザーには使い慣れたブラウザ

◆Google Chrome
開発元はgoogle。GoogleMap・G-mail・Googleカレンダーなど各種サービスが多いので連動させて使いやすく、動作が早い。

個人的に…サイトを制作する際には、自分が持っているスマホのキャリア以外でどんな状態か確認することも多く一番頻繁に使っているのはChromeが多いです。

Opera…は、最近どうなっているんだろう…。

元データはありますか?と聞く理由

ホームページ制作側から、依頼者様に素材を提供してもらう上で「元データはありますか?」と質問することがあります。今あるものをそのまま使ってくれればそれでいいのに…と思うのになんでこんな事を聞かれるのか?すでに理由をご存知な方もいらっしゃるとは思いますが、改めてその理由について書いてみようと思います。

左側の画像は、このサイトで使用しているロゴの画像。(gif画像)
右側の画像は、このサイトで使用しているロゴの元データ。(ai画像)

ホームページで使用している画像というのは、一般的にjpg、gif、pngという拡張子で保存してあります。ホームページの検索順位を上げる対策の一つとして、画像の読み込みをスムーズにするため、必要以上に大きなデータにならないよう特徴に合わせて軽いサイズで保存したり、軽く保存できる拡張子に編集したものを利用しています。
そのため、上記の画像のように、もっと大きく使いたいと思っても、拡大した際滑らかな曲線が失われてしまいます。またjpgの画像はデータを軽くするための圧縮がかけられていることもあり、編集を繰り返す度に色の劣化も激しくなってしまいます。

ロゴの元データ、こちらの拡張子はai、eps、(fw.png)等の場合、拡大をしても滑らかな曲線を維持したまま加工ができます。また保存の際に劣化する心配もありません。

元データが無い場合は、いただいた素材の中で出来るデザインを作成していきますが、せっかくお金をかけて作るサイト。綺麗に仕上げるためにも、元データがあるかもしれない場合には探していただき素材を提供していただけると嬉しいです。

InstantWordPressを使ってみた!

個人的に…レンタルサーバーを契約していたり、もちろん会社でも場所を用意していただいたので気にしたこともなかったInstantWordpressとやらを、先月あたりからいろいろいじってみました。

InstantWordpressとは?

レンタルサーバーと契約していなくでもローカル環境(自分のパソコンで)wordpressを使ってみることができるツールです。とりあえず使ってみたい時や、現在サイトがあってリニューアルサイトを平行して作る場合、サイト製作を複数案件抱えている場合にはUSBごとに案件をわけて作業ができる。そして私の場合はスクールでWordpressを教えることもあるので、生徒さんに使ってもらう為に試してみようと思いました。

1.Wordpressのバージョンが古い
管理画面内でバージョンアップ作業はできますので、ダウンロードした後には最新版にすることをお勧めします!

2.動作がとにかく遅い
ローカル環境でいろいろ動かしているので仕方のないことだとは思いますが…普段サクサク作業している身としては、時差があるので作業しにくい印象でした。

3.PHPのバージョンが古い
プラグインによっては、PHPのバージョンが古くて対応してない…というものがいくつか見つかりました。PHPをダウンロードしてきたら使えるのか…は、今後時間をみて検証してみようと思います。

4.管理画面外のファイル修正が反映されない
ローカル環境で作業をしているので、ファイルから直接修正を加えた場合、場所によっては反映されなかったりすることもあるそうです。外観から見られる場所については、編集可能でした。

5.Macユーザーには使えない
文字コードがUTF-8に対応していなかったので、Macでは使用できません。

6.パソコンユーザー名が全角文字だと起動できない
新規でパソコンユーザーを追加して、半角英字登録したら起動できました。

USBさえ持ち歩けば、どこでも試せる!と気軽に考えていたのですが、一番最後に紹介した現象がなかなか解決できず四苦八苦した点です。
いろいろ不都合があったものだけを書き出ししましたが、すごく便利で使っていて楽しいツールだったので今後もいろいろいじってみようと思います。

指示通りにならない装飾文字

ブログの投稿をしている人や、ホームページを運営している人から「正しく記述しているのに、思う通りのレイアウトにならない」という相談を受けることがあります。

前回「斜体を直したい」というのも若干ですが関連する事項です。

WordPressに限らず、様々なブログサイトには多少ですが文字を装飾できるような機能が搭載されています。使っているブログによってできることは異なりますが、太字にしたり文字色を変更したりアンダーラインを引くことができるブログもあります。

正しく文字装飾の支持を出しているのにも関わらず、文字に斜体がかからなかったり、太字が適用されなかったり…。記述のミスや、他のCSSが邪魔している場合もありますが、根本的に問題がある場合があります。それは…

使用しているフォント自体に、その機能が備わっていない。

聞いたことがある方もいらっしゃるかもしれませんが「メイリオ」というフォント。このフォントはwindowsの標準フォントにもなっていた書体で、日本語で入力している際、読みやすいフォントです。読みやすさにこだわっているフォントなので、このフォントには読みにくくなってしまう「斜体」は用意されていません。

ホームページを制作する際、このページで表示するフォントを「メイリオ」と指定すると、ブログには「斜体」のボタンがあるのに表示が変わらないという状態になります。

太字についても同様のことが考えられます。

またコーディングをしている人だと記述することもあるフォントの太さを指定する記述。太字(bold)であれば、対応しているものが多いものの、400・500・600など、数値で指示ができる太さについて、対応している日本語はあまり聞いたことがありません。

googleのwebフォントなど様々な種類のフォントを見たりすると様々な太さが用意されていたり、海外製作のテーマを再編集している際には細かく文字の指定があったりと、少し羨ましく感じます。

日本語は平仮名・カタカナ・感じのミックスで書体を用意するのがとても大変な言語だとは思いますが、今後増えてくれたら嬉しいなぁと思います。