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

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

Dw CC2017のコメントアウト斜体を直したい

DreamweaverをCC2017にバージョンアップしてからというもの、単語が覚えられず断念していたCSSのコードもウキウキと使えるようになりました!……という記事を先々週に書きました。

じゃあ何もかもがウキウキとコーディングできるかと言うと、実はそうでもなかったりして。バージョンアップはメリットが増えることもあれば、自分にとっては都合の悪い状態にもなる時だってあります。今回はCC2017になって「え?」となった内容についての紹介です。

細かい内容はいろいろあるのですが、一番の困惑ポイントはテキストモード画面で見るコメントアウト表示。実際のホームページには表示しないメモ書きを、コーダーが残す時に使用しているものなのですが、CC2017から斜体になってしまいました。

斜体読みづらい!

じゃあ環境設定から直してみようかな…と。
編集画面に関してのレイアウトはDreamweaverに限らず、Adobe系のソフト(illustratorやPhotoshop)は上部メニューにある[編集]-[環境設定]で変更できるようになっていることが多いです。細かく設定出来るため、目的のものを探したり、見慣れない名前も多いとは思いますが、今後よく使用するソフトを使いやすくするために、この設定はしておいて損はしないと思います。
各項目をチェックしながら、斜体設定がかかっている内容を確認していったのですが、該当する項目が見つからない!!環境設定じゃなくて表示かな?とも思いDreamweaverの様々な箇所を確認したのですが、解決できなかったのでgoogle先生に検索してもらうことに。無事に解決方法は見つかったのですがその方法というのが…

インストールしたドライブにあるファイルを直接書き換える

という、荒業。マジですか…。インストールドライブから「Adobe Dreamweaver CC 2017\www\extensions\default\DarkTheme\main.less」にある.cm-commentのイタリックを削除(もしくはコメントアウト)するそうです。ソフトの中で斜体にするかどうかも選べないってことです。

多分この機能、解除したい!ってあまり思わないだろう、というAdobeの判断なのか…。

元画像を加工せずに、見せ方を変えてます。

LINEやGoogle、Facebookなど、自分のアイコンを設定する際、アップロードした画像は長方形なのに、アイコンとして表示された画像は丸型なのを不思議に思ったことはありませんか?

この丸型のアイコン、アップした画像が丸く切り抜かれているのではなく、データは長方形として残したまま、角の部分だけを見えないように細工をしています!

この細工…実は数年前まではできない技術でした。以前までは長方形の写真を丸く表示する為に、Photoshopやillustratorで加工しなくてはできないことだったので、できる人に依頼して加工をしてもらうか、角を丸くするようなデザインで作らないという感じ。また元データを残しておかないと、丸型にしてしまった画像を元に戻すこともできません。ずっと同じ業者にサイト管理をしてもらっている場合はよいのですが、その都度違う業者に依頼をすると元データがないため、再加工ができないという状態でした。

現在は…というと。

画像を直接加工するのではなく、一部分だけ見せない方法、CSS3の記述で画像を調整しています。

何も手を加えていない画像。
そしてCSS3を使った画像。

上の二つの画像、マウスを右クリックして画像を保存していただくとわかるのですが、保存した画像はどちらも長方形のままになっています。CSS3では画像の元データはそのままで、いろんな装飾ができるようになりました。

画像で角丸を作るよりも手間もかからず、綺麗な曲線が作れて、元データも残せる!!!かなり便利なのでCSS3は積極的に使ってサイト制作をしたいですね♪

バージョンアップ

ホームページの製作現場ではよく使用されているAdobe Dreamweaver。

製作のお仕事をするようになって数年。当初は視覚的に見てわかりやすいデザインモードで制作していましたが、現在は作業の95%以上をテキストモードでおこなっています。…というのは、このデザインモード、100%作った通りに再現していたかと言うと、なかなかそこまでの再現率にはいかず。一般的に使われているものや、昔から使用されているコード。全ブラウザで対応していることについては正しく表示してくれていました。
ところが、あまり使われていないような機能、サービス、見せ方をしようとすると、そこに関しては視覚的に確認できるデザインモードでは表示されず。独自性を出したサイトに関しては、結局テキストコードで編集し、直接記述をする方が惑わされなくて済むという感じに…。
Dreamweaverがバージョンアップしたところで、テキストモードで編集しているとあまりその恩恵を感じることもなく「新機能を試してみよう!」なんて考えることもなく、黙々と作業を作業をしてました。

ところがAdobeCCになり、以前は高額のソフトを購入しないと導入できなかったDreamweaverが月額で入手できるようになり、また「気軽に始めてダメだったら諦める」もできるようになった為、使い方を教えてほしいという依頼がチラホラと。

illustratorやPhotoshopに関しては、AdobeCCになってからのバージョンアップも常に最新版にして、スクールの授業で活用していたのですが、Dreamweaverに関しては、コードをテキストで入力していくだけだったので、バージョンアップの必要性を特に感じず。Dreamweaverを使わず、テキストエディタで編集するくらいでした。
…が、教えるとなると、ここはやはり最新版を…ということで、2015→2017にバージョンアップをしてみました。

結果・・・・・・

テキストモードがすっごい改善されてる!!!!!

大感激です!

Dreamweaverにはコード入力する際、単語の頭文字を入れると候補を出してくれる機能があります。
「blockquote」という単語を記述しなくてはいけない場合。「b」と入力すると変換候補で「blockquote」を出してくれます。けれど、最初に書いた通り、全部のコードを変換候補で出してくれていたわけではなかったので、出てこない単語に関しては覚えるか、調べるか。正直英語がとっても苦手な私としては、覚えられないからこのコードを使うのは諦めよう…となることも。それが最新版ではちゃんと出てくるじゃないですか!もっと早くバージョンアップしておけばよかったと、苦笑いな状態です。

Adobe系のソフトに限らず。バージョンアップをすると、今使い慣れた状態から、部分的にだけかもしれませんが新しい機能や、見慣れた環境から変わってしまいます。変わってまうということは、新たに覚えなくてはいけないことができるので、バージョンアップをせずにそのまま使い続ける…ということが、・・・・・・個人的な印象ですが、日本はこの傾向が強いかもしれません。(私も新しいものに飛びつくタイプではなく、慎重に前にすすみたいタイプです)バージョンアップをむやみにオススメするわけではないですが、現状でできないことがバージョンアップで改善されることもあるので、古くなったな…と感じた時には、使用しているパソコン・ソフト・サイトなど、新しいものする検討も必要です。

チラシは専門のソフトにまかせたい理由

印刷するデータ(チラシ・ポスター)を作成するのに、WordやExcelではなく、illustratorやPhotoshopを使う理由。

WordやExcelもバージョンを重ね、昔に比べて様々な図形を使ってデータを装飾したり、チラシのようなものを作ったりできるようになりました。
またCMや広告でも時々「WordやExcelで作ったデータをそのまま印刷可能」というような文字をみかけることがあります。
普段使っているWordやExcelで作れるのならば、わざわざデータを作るのに、新しいソフト(illustrator/Photoshop)を使わずとも…と思う方もいるかもしれませんが、、、

Wordで作ったデータと、illustrator等で作ったデータは
結構はっきりと差があります。

その差のお話しを少し。

何が一番違うのかと言うと、解像度という印刷した時の線の滑らかさが違います。WordやExcelの基本前提としては、社内で一般的に使われる範囲の用紙サイズ・プリンターの性能が想定されています。それに対してillustratorではカードサイズのような小さなデータから、巨大ポスターのデータまで作成する為、解像度を指定してデータを作ることができます。

そして色について。WordやExcelはRGBカラー(光の3原色・レッド・グリーン・ブルー)によって色を表示しています。けれど印刷物はCMYKカラー(シアン・マゼンタ・イエロー・ブラック)のインクを混ぜて色を再現します。RGBカラーは明るく鮮やかな色を発色しやすいのですが、CMYKはこの明るく・鮮やかという色の表現が難しいのです。その為、Word等で指定していた色よりも、印刷をしてみたら色がくすんでしまうということがあります。illustratorの場合は、作成時にRGBとCMYKを選択することが可能です。

Wordは文章を書くソフト、Excelは表計算のソフト。基本のコンセプトが図形にないので、ある素材の中での工夫をすることは可能なのですが、一から作ったり、部分的にカスタマイズするということが難しいです。

そのため、使いやすい素材は頻繁に使いまわすことになり「ありがち」という仕上がりになることも少なくありません。

宣伝や広告をするのであれば、他と差が出せる美しいデータを作るためにも、専用のソフトというのは大切です!

Adobe CCとCS

IllustratorやPhotoshopをこれから習ってみたいと言うお問い合わせの中に、「会社にソフトが少し前のソフト(旧バージョン)がインストールされているんだけど、それでも使えますか?」という質問をもらうことがあります。
illustratorやPhotoshop等のソフトは現在CCというバージョン。以前まではCSというシリーズでした。

パソコンを使ってお仕事をする立場としては「最新版であるべきです」というのが正解かもしれませんが、個人的には「どちらでも大丈夫」とお答えしてます。

・・・というのも、ずっとillustratorを使っている人であれば「こういう機能はないの?」「もっと簡単にできてほしい」という要望があるかもしれません。ですが「これから始める」「こういうのを作ってみたい」というレベルであれば、CSのシリーズでも充分作れてしまうからです。

例えばMicrosoftのWordやExcelも、最新版は2016ですが2013/2010でも基本的な内容については揃っていると思います。自分がやりたいと思ったことが、新しいバージョンにしかないのであれば、最新版を購入する選択しかありませんが、基本的なものについてはあまり変わりがありません。(そもそも基本的なことが頻繁に変わると、使いにくくて困っちゃいます)

すでに旧バージョンのソフトを持っている方に関しては、最新版のCCではなく現在持っているCSでまずは慣れてもらい、もっといろんなことをやりたい!最先端の内容を駆使して作品作りたい!となった時にCCをおすすめしています。

また、CCは2013年~随時最新のものをダウンロードさせる形で販売。それまではソフトを購入するという形式でした。CSの頃はソフト購入の金額が、個人の趣味では買うのに躊躇するレベルの高額でして…。例えばCS6のillustratorの価格をネット検索をすると58,800円。「これから始めてみようかな」「やっぱり使いこなせないからやめよう」なんて、気軽に取り組めないお値段設定となっていました。買ったからには元とるぞ!という具合です。

ところがCCのシリーズになり、現在ソフトは月額方式を採用しています。
なので気軽に始めて、しばらく使わない時期には契約をせず、またやり始めたい時から支払い再開して、常に最新版を使うことができるようになりました。また、デザイン会社ではなくとも、ソフトを導入するハードルが低くなったと思います。
今までデザイン会社にお願いしていた、チラシや広告のデザインも、社内でデザイン感覚がある人にお願いして作ってもらう…という企業も出てきているようです。

  • まったくソフトを持っていない人はCCを、
  • CSをすでに持っている人はCSで勉強、
  • 更に最新のことをやりたい、本職でやりたい人はCS→CC

をおすすめします。

これは以前ネットのコラムで見た記事だったと思うのですが…。

CS→CCに変更となった経緯について、CSまでは2年に1回くらいのペースで最新版のソフトがリリースされていました。ソフトを開発する側の立場からすると、ユーザーに最新版を購入してもらう為には2年に1回「これは最新版にのりかえなきゃ!」というような追加機能をつける必要があります。最新版の機能に魅力がなければ、高額のソフトなので何年もそれを使い続けちゃうというわけです。
一番最初のリリースからCCになるまでに約25年前。そこから徐々に機能は増やしたものの、25年も経過すれば魅力的になるような追加機能を出すのも大変なのでは?そこで、月額制に切り替え、利用者さんが購入しやすくした上で、ユーザーを増やすという方向になったとも考えられる…という内容でした。

この考え方だけではないとは思いますが、確かに趣味でやりたいという人にもおすすめしやすくなりましたし、CCになってからは絶対に覚えなきゃダメ!というような新機能は少ないです。

まずは「気になる」「やってみようかな」な方等、どんどん増えてほしいです♪

余談ではありますが…現在はCC、その前がCS。私はその前のシリーズ5.5から利用しています。5.5って何年前?と疑問に思い調べてみたのですが「1994年」・・・23年前(´・ω・`)