Google翻訳で読み方のわからない英語の発音を確認してみた!

ホームページ制作の仕事に携わり二桁年数。

同僚やスクールで、コーディングの話しをする機会も多くあるのですが、お勉強が苦手な私には(特に英語の酷さは目も当てられない)困ったことがあります。

ソフトを使いながらでも長年の経験からタグの単語は何とか覚えることができました。

ところが、読み方がわからない!!!

何故なら声に出さずとも、ホームページは単語の入力で作れるからです。

故にいざ口頭で伝えようとすると「w・i・d・t・h」とアルファベット読みで説明。

当然ながら「何と読むんですか?」には、発音がよくわからいと…。

 

英語の苦手意識も手伝い、特に調べることなく過ごしてきたわけですが、ネットニュースを見ていたところ、最近の外国人日本観光客はGoogle翻訳でコミュニケーションを取るという記事が。

その手があったか!!Google翻訳の音声機能!

Google翻訳は日本語→多言語の翻訳もしてくれますが、翻訳結果を音で確認する機能もついています。

 

早速長年よくわからなかった発音を確認することができました♪

………できたんですけども、

英語の発音を日本語として説明するのは難しいですよね(>_<)

これをカタカナ表記でどう書くべきなのか?

そしてこの読みを聞かれた時に私が発音できるのか??(多分できない

 

今後もアルファベットで説明することになりそうです(涙)

 

余談ではありますが、Google翻訳ではマイクで喋ったものを翻訳してくれる機能も搭載されています。

日本人はこの機能を使って英語の認識を中々してもらえないそうですよ(苦笑)

英語に自信のある人!笑いのネタを作りたい人は是非チャレンジしてみてください!!

普段使ってる?頻度は少なくても知ってると便利なツール

線を引く。オブジェクトを作る。テキストを入れる。写真を配置する。

イラストレーターではチラシなどの紙面データや、インターネットの画像など幅広く制作ができます。

印刷物に関する色々な機能が揃っているのですが、機能がありすぎて実際にはあまり使っていない機能も少なくありません。

今回は個人的に…あまり使う頻度は高くないけれど、知っていれば使う時に困らない!(はず)

「線幅ツール」とその下に入っているツールを紹介します。

 

線幅ツールのアイコンはこちら!

順番に自分なりの使い勝手も含めた紹介です!

①線幅ツール
このアイコンから、やれる内容が伝わりにくいと思うのは私だけでしょうか?私はわかりにくい!!線幅ツールの名の通り、直線で描かれた線に幅の強弱をつけられるツールです。(塗りだけの画像だと何もおこらない)手書きっぽい強弱をブラシを頼らず自在につけられます。

②ワープツール
縁をクリックしたままマウスを動かすと、動かした方向にカーブができます。個人的にはあまり使う機会はないのですが、ペンツールが苦手な人はこれである程度のカーブを作ってしまうこともできるのかもしれません。

③うねりツール
オブジェクトの端をクリックし続けることで、どんどん渦巻きができていきます。いったいこれをどう使うのか…このツールを初めて見たときに「なんのために…」と思ったのは秘密です。うねりを重ね、グラデーションや不透明度を調整すると和風の紋様になったり、波紋を作る時にも使えます。

④収縮ツール
端をクリックしながらオブジェクトの中央にマウスを移動させると、オブジェクトがどんどん収縮されていくというツール。上のうねりツール同様、これはいったい何のために…と機能が追加された時には疑問だらけでしたが、重なった紙がめくれているというデザインの再現や、オブジェクト全体を囲い中央をクリックすると、すべての辺から均等に内側へ削ってくれるという使い方で利用しています。

⑤膨張ツール
上の収縮ツールとは逆に、選択している縁を膨張させる方向にカーブが出来ます。収縮ツール共にペンツールが使えると、使う機会は多くなさそうですが、複数個所同じカーブを作っていく時には使えるのかもしれません。

⑥ひだツール
オブジェクトの内側に向けてヒダを作ってくれるツール…(?)エリアサイズが決まっていて、オブジェクトの中で使う時はありますが、似たようなデザインの場合には下で紹介するクラウンツールの方が使いやすいと個人的には思ってます。

⑦クラウンツール
ビックリ吹き出しなどだったら、ひだツールよりこっちの方が個人的には断然使い勝手がいい(と、私は思っている)クラウンツールです。アイコンの図のように、オブジェクトの縁をクリックするとそこが爆発したように尖ります。吹き出し全体のように使う時にはオブジェクト全体を囲ってワンクリックすると、全体辺にクラウンツールが反映されます。

⑧リンクツール
紙をビリビリっと破ったようなデザイン、雑に破ったトイレットペーパー、血が滴るようなデザインなどを簡単に作れるツール!デザインとして再現したくても、このギザギザっていちいちペンツールで作ってるのは手間。このツールを発見した時、とても嬉しかったです!嬉しかったけど、このツールの名前が「リンクツール」っていうのが解せぬ…。皆さん「リンクツール」でわかりますか?

Illustratorで作ったデータが重すぎる場合ラスタライズを使う

WebのデザインとDTPデザインで気を付けることの一つに解像度があります。

Webは解像度72dpiというサイズが一般的なサイズとされているのに対し、DTPは解像度300dpi(A4サイズ)が一般的とされています。

DTP用の画像はWebよりも約4倍解像度が違うということになります。

 

解像度が大きいデータは縮小して使用することができますが、解像度が小さいデータは拡大すると画像が粗くなってしまい使えません。写真や画像素材を提供しているサイトに行くとダウンロードできる画像サイズが複数あるのは、高い解像度が必要とされるDTPの素材としても使ってもらえるように用意してあるわけです。

 

大は小を兼ねるなら 全部大きな画像でもらってこれば解決!

 

と、思いたいのですが、なかなかそこは上手くいかないところがポイントでして(涙)

大きなデータで困るのは、とにかくデータが重たいこと!

デザインの会社では大きなデータも取り扱うことが多いのでハイスペックなパソコンを使用していますが「確認の為に添付したら、メールが送れない!」「印刷所にデータを送ったら重たいから軽くして!」このようなトラブルが起こる原因にもなります。

 

重要なのは適切なサイズのデータを使うことなんですが、どんなサイズで使うかは配置をしてから考えたいですよね。

そこでデータが重くなりすぎず、ある程度サイズを決めてからその画像の解像度を編集画面で確定させる方法を使います。

 

1.まずは大は小を兼ねることができるので、大きいデータを用意します。

2.Illustratorの画面上で、解像度が下回らないようにサイズを調整してしまいます。
※画像を選択した状態で拡大縮小すると、PPIが自動で変わります。

3.PPIの数値が極端に大きい場合(A4で必要なPPIは300くらいが標準)
上部メニューにある[オブジェクト]-[ラスタライズ]を選択します。

4.解像度を300ppi設定し、透過データの場合には「背景 透明」にチェックを入れて
「OK」をクリックします。

 

上記の方法で画像のサイズを適切な解像度に変更することができます。

ラスタライズしてしまったデータは元に戻せないので、必ず画像は画像でバックアップを残しておくことをおすすめします。

データが複雑すぎてイラレが動かない時や、データが重すぎるデータを入稿する場合には是非試してみてください。

パソコンではいいけど、スマホで見づらい画像はどうしてる?

Google検索がパソコン表示とスマホ表示、両方を重視するようになり、レスポンシブのサイトの制作がほぼ100%になってきました。

以前はパソコンサイト、スマホサイトを別で制作し、それぞれの環境に合わせて表示する内容を選んでいましたが、この場合は別サイトを表示させているためサイトのアドレスとなるURLが違います。

URLが違うということは、サイト全体の評価は変わらないのですが、パソコン・スマホと各ページにお客さんが分散しているため、1ページの人気度としては共通しているサイト、レスポンシブサイトにはかないません!

そこでバラバラに作ってあったサイトを共通化させる、そもそもパソコン用しかなかったサイトをレスポンシブ化したサイトにリニューアルする会社が増えてきているようです。

 

…………というわけで、レスポンシブ化させるにあたり、なかなか難しいのがデザイン問題!

 

以前もブログで少し紹介しましたが、パソコンの画面は基本的に横長。
そしてスマートフォンは縦向きで閲覧している人が多いのではないでしょうか?

レスポンシブデザインは、画像などを共通して使うため、どちらの画面で見ても綺麗に見えることが求められます。

例えば「お申し込みはこちら!」というバナーをパソコンサイトで横長にデザインします。
バナーの上に細かな装飾や文字を配置させた場合…スマホの場合はとても小さく読めません!

そこでどうしても読ませたい場所、どうしても表示を変えたい箇所だけ、パソコン用・スマホ用の画像を用意し、それぞれのブラウザで片方の画像が表示されるように設定をします。

css3からの機能、Media Queries(メディアクエリ)を使います。

ブラウザの幅が○○以上の場合にはAの画像。
ブラウザの幅が○○以下の場合にはBの画像。

このような指定をすることが可能です。

 

できるんだったらやればいいじゃん?って思ってませんか?

画像の切り替えの場合、サイトに表示させていなくても読み込みはしています。(読み込んだ上で「ここは非表示」と指定をしています。)読み込む画像が複数になればなるほど、重くなります。そして、運営をしていく上で画像差し替えがあった場合、1個の画像ではなく両方の修正時間がかかってきます。

またGoogleのSEO的には、原則としてパソコンで見られる情報とスマホの情報は等しくあった方がいいとしているような傾向もあるので、出来ることならデザイン段階でパソコン・スマホと連動しやすいデザインである方がいいのです。

このような理由で、パソコンとスマホ、どちらでも見やすいデザインを考えています。
デザイン的言えば自由度は少ないのですが、そもそもこのデザインを見せるためにはSEOに強く、見つけてもらえるサイトにならなくてはいけません。

肖像権やプライバシーを侵害しないようにモザイクをネット上でかけよう!

撮影した写真をブログにアップしたいけど、
関係ない人も映っていたらアップしちゃダメですよね?

という話しをお客さんからいただくことがあります。
「プライバシーの侵害」「肖像権」というワードも近頃では一般的に広まってきていて、スマホの場合にはアプリを入れて顔がわからないように加工をしてアップされる人も多くなってきました。

では、スマホのアプリに頼らない場合は?

パソコンに入っている画像加工ソフトを利用して、モザイクをかけることも可能ですが、パソコンの種類によってはソフトがそもそも入っていなかったり、ソフトも種類やバージョンが複数あるのでマニュアルとして説明するのが少々困難だったりしました。

また、あまり頻繁に使うものでもないのに、お金をかけて購入することに躊躇があったり、これ以上ソフトを増やしてパソコンの動きを遅くなるのを心配される方も多いです。

ソフトに頼らずに加工ができるとなると…と、調べてみたところ…
ネットを調べてみると、探してたサービス見つかりました!

オンライン上(インターネット上)で、写真にモザイク加工をする方法!

オンライン上で出来れば、ソフトを入れる手間もないですし、パソコンの容量をとることもありません!
必要なのはネット環境のみ!ということで、ご紹介します。

facepixelizer」←文字をクリックすると、サイトが開きます。

元々は海外で制作されたサービスのようですが、日本語版もあるので利用は簡単です。

1上記のサイトにアクセスすると、下の画面になります。
日本語表示じゃない場合には、右上の「日本語」をクリックしてください。

2画面の真ん中に加工をした写真を持ってきます。
ドラッグしてきた画像が、画面上に反映されます。

3左側のメニューの中から「手動」を選択すると、詳細に設定される画面が表示されます。
※「モザイク」「ぼかし」「仮面」は先にクリックしないようにします。

4表示されるようになった箇所で、どれくらい元がわからないように加工するかの調整ができます。

5加工の調整ができたら、モザイクをかけたい場所を指定します。

6左側のメニュー上部にある「モザイク」をクリックします

 

モザイクをかけたい場所が複数ある場合も、上記の作業を繰り返し行っていただければ、何か所でも可能です。仕上がった画像をダウンロードして、ブログに貼り付けてみてくださいね。

 

【Illustrator】メモ帳やWordに書いた文字を、雑誌のレイアウトのように綺麗に配置する方法

イラストレーターを使って、Wordやメモ帳で書いてある文章を、
雑誌のようにキレイなレイアウトへ、簡単に文章を入れる方法です。

まずは用紙のどの部分に文字が収まるのかレイアウトを作ります。
文字は縦書きで、黄色のエリアに文字。
橙色の部分は写真を入れることを想定しています。
文章を入れる箇所は全部で4か所。
右上、右下、左上、左下の順です。
下の図のように、文字を入れるエリアを
まずは先に作ってしまいます。

イラストレーターの文字ツールを長押しして
「エリア内文字(縦)ツール」に切り替えます。

カソールを文字を入力するエリア(黄色のオブジェクト)の
フチに持っていくとカソールのマークが変わり「パス」と出るので
その状態でクリックをします。

黄色の四角の中にサンプルのテキストが入ります。
右上以外の場所も同じように、文字が入った状態にします。

この状態でも文字を貼り付けることはできますが、
現状ではこの4か所は個々の文字エリアとなっているので
この4つを連結させます。
連結をさせると、長い文章を右上に貼り付けをした際、
入りきらなかった文章が右下、左上、左下と
自動的に入ってくれます。

文字入力されている、4箇所をすべて選択します。
選択をすると、それぞれ右上、左下に四角のマークが出てきます。

右上にある文字エリアの、左下の□をクリックして、
マウスを移動させると、マウスの矢印記号が変わります。
このまま右下の文字エリア、右上の□にマウスをのせます。
すると、鎖がつながっているようなマークにアイコンが変わるので
そのアイコンの状態で、□をクリックします。

上記の図のようになりましたか?
右上の文章終わりは、右下のエリアに続けます…というような指示になります。
この要領で、右下の文章終わりにある□を左上に、
左上の文章終わりを、左下につなげます。

この状態になったら、Wordやメモ帳で作成した文章をコピーして、
今作った文字の箇所に貼り付けます。
長い文章を、個々に貼り付けず、いっきに貼り付けて、
この中で改行の位置などを調整していくことができます。

CSVの文字化けを直す方法(windows)

CSVデータとは?

CSVデータは様々な文字情報を「カンマ」で区切って整理をしてあるデータです。
ファイル名のあとに「.csv」で保存されています。
あまり聞き馴染みがない人も多いかもしれないのですが、意外と身近なところでも取り扱えるデータで、Excelで作ったデータを保存する際、ファイル名の下にある拡張子を選択するメニューの中にも「csv」は存在しています。
ただしcsvは主に文字情報を整理できるデータなので、画像や表などのデータがある場合には利用しません。

具体的にこのCSVデータはどんなところに、どんな時に使っているのかというと、お客様の個人情報やショッピングサイトでは商品情報、メーカーでは製品のデータベースとして利用されています。

お客様情報を入力する際、画面の指示にしたがって「名前」「住所」「電話」と入力をして最後に「登録」のボタンを押して完了するというような流れが多いと思います。1画面の中で入力できる情報は1名です。csvデータでは1件ずつのデータではなく、複数まとめて登録・変更・削除ができます。
例えば、区画整理があり特定エリアの郵便番号に変更がある場合、該当する人を1件ずつ表示させて修正するのは作業効率があまりよくありません。そこでこのCSVデータが役立ちます。
今まで登録してきたデータをCSV形式で一括ダウンロードをして、Excelで編集をしてしまいます。Excelには並び替えや絞り込みの機能があるので、変更しなくてはいけない登録をピックアップしてまとめて変更することができます。

このように、使えば便利なCSVファイル。
ところがこのCSVファイルをExcelで編集しようとした時。時々おこる問題が文字化けです。
せっかくデータを一括で取得して、まとめて編集をしようとしていたのに…。
原因はCSVファイルの文字コード!文字コードの情報をクリアしてExcelで編集可能な状態にします。

1.CSVファイルを右クリックして[プログラムから開く]-[メモ帳]を選択します。
※[メモ帳]がない場合「プログラムの選択-その他」からメモ帳を探して選択します。

2.メモ帳で開いたファイルをそのまま「名前をつけて保存」するのですが、
ファイル名の下に「ファイルの種類(T)」という項目があるのでここを「すべてのファイル」にします。
※まだ「保存」はクリックしないでください。

3.「保存」ボタンの左側に「文字コード」という項目があります。
文字コードを「ANSI」に変更して「保存」ボタンをクリックします。

これでExcelで文字化けしないデータの完成です。
Excelを起動して、上記で別名保存したデータを開くと文字化けが直っていると思います。
CSVの文字化けで困っている時には是非試してみてください。

数字を区切る、コンマとカンマとピリオド

先日検索用ワードについて調べている時思ったのですが「千円」をキーワードとして含む場合、どう表記するのが一番いいのかな?と。

①1000円
②1,000円
③1.000円
④千円
⑤1000円

皆さんだったらどれを使いますか?
ネットいろいろと調べたり検証をしてみたところ①と⑤については同じように検索表示されました。

②の表現はあるなぁーと思ってたのですが、③については私が思いついた表記ではなく、ネット検索をしている時にこのような表記をする人がいるという記事を見かけて、ここのピックアップしました。

ネット検索に限らず、普通の文章でも数字を3桁区切りで「,(カンマ/コンマ)」「.(ピリオド)」と両方あるようでして、私個人としてはカンマが一般的!ピリオドは小数点の時に使うから「1.000円」はありえないと思ってたんですね。

ところが「ドイツ、イタリア、スペイン、ポルトガル」このあたりではカンマとコンマの使い方が逆。カンマが小数点以下となるそうです。「1.000円」=千円。「1,000円」=1円というような記事が!?国内だけではなく、会社が上記のような語圏にある場合には社内で統一する際「1.000円」を使うということも考えられます。

マイクロソフトなどのソフトウェアがアメリカを本部に会社があったりということもああり、デフォルトの機能として1000円と入力して「,」が自動挿入されますが、もちろんソフト内の設定でそれを変更することも可能になっています。

ただプログラミングの言語として見ると「,」と「.」は明確に違います。「.」は小数点以下という表現になります。なので「.」は当然少数点以下で、「,」は&という意味で使います。

「1,000」=1と000
「1.000」=1
「1000」=1000

こんな感じです。

 

もうすぐ閉幕する冬季オリンピックのテレビ実況。

 

「コンマ一秒の違いで~」

 

コンマって言ってる!!!!!!

なるほど。これもメジャーな言い方か。
「ピリオド一秒の違い」って言わないもんなぁ…と。
・・・・・ん?まてよ、「レイ点一秒差の違い」とは言う!この「点」はおそらく「ピリオド」の方(困惑)

 

日本人ですが日本語って難しいなと日々感じてます。

検索詳細設定で調べたい画像を見つける!

弊社ではホームページの制作だけではなく、公開後もサイトがお客さんに見つけてもらえるサイトなのか、見つけやすいサイトになっているかをサポートすることがあります。

SEO対策というもので、検索結果にかかわる内容です。

というわけで「検索」ついて、頻繁にGoogle検索を使うのですが、そのほとんどは「ワード(言葉)」による検索。

先日お客様から質問があり、画像の検索画面を久々に開いたところ、いろいろと機能が変わっていたので今回はそれを紹介します。

まずはGoogle検索に調べたい単語を入力します。今回は「富士山」と入力して、通常通り検索をします。すると富士山に関するサイトが右の画像のように表示されます。

今回は画像のみの検索をするために「すべて」の隣りにある「画像」をクリックします。

富士山の写真がたくさん表示されます。表示された画像の中に探しているものがない時には、追加のワードをクリックすると更に検索される画像を絞ることができます。
「桜」という単語をクリックします。

「富士山」「桜」がある写真が一覧表示されます。
このように最初の単語からキーワードを増やして画像を絞る方法もありますが、更に細かく検索を絞ることもできます。
右の画像、赤丸の場所「設定」から「設定のオプション」をクリックします。

この画面では、除外したいキーワードの設定の他に、探してる画像の拡張子(jpgやpng)や、画像のサイズ、色からの画像を検索をしたりと、より詳細な検索設定をすることができます。

一つ前の検索の詳細設定で、画像サイズを「1024×768」を設定しています。
すると、それ以下のサイズが省かれ、設定したサイズより大きいもののみが表示されます

検索をしても自分が知りたいこと、必要な画像がみつけられない場合、このように詳細設定がとても役立ちます。活用してみてくださいね。

リピート素材って知ってる?

ホームページのデザインをする時「リピート素材」というのを使うことがあります。

文字通り、素材をリピートさせて使う方法です。

近年サイトデザインは単色でスッキリ、もしくは1枚の写真を画面に大きく表示させる方法が流行していますが、サイトタイトルの背景や、ちょっと目立たせたい箇所の背景として今でもリピート素材は使われています。リピート素材のメリットは画像の軽さ!例えばホームページ全面に表示されるような1枚写真に比べて、画像が小さいのでデータも軽く、サイトを表示させるスピードがあがります。

そんなリピート素材。
実際に使うとどんな感じなのか?
今回は下記の①~⑧の画像をサンプルにリピート背景を作ってみたいと思います。

※下記画像は模様がわかりやすいように、拡大したデータです。実際は10px✖10px

画像の素材は10ピクセルの正方形で、白の素材、背景は透過してあるものを使っています。
リピート素材は上記の表のように、小さい素材を縦横両方向にリピートさせて利用することができます。
上記のサンプルでは、リピートした背景素材の上に画像を配置していますが、もちろん文字を入れることも可能です。

リピート素材が重宝する理由はこれだけではありません!白部分は素材なので変更できませんが、水色の部分はコーディングで指定している色なので、変更可能です。

更には素材をコーディングで縮小することも可能!元の素材を5分の1にしてみました。

画像素材というと、それぞれ画像を用意しなくてはいけないと思うかもしれませんが、リピート素材は1枚の画像からいろいろな見せることができます。
画像素材を1個ずつ用意するよりも読み込む負担も少なく、制作としても難しくはないことなので、是非活用してみてください。

どの国の人?どの言語の人?

もうすぐ冬季オリンピックですね!

皆さん注目している競技などありますか?
私の周りではフィギュアスケートを筆頭に、スキージャンプやスピードスケートなどの人気が高いようです。
開催国が韓国なので、時差なくリアルタイムでテレビ応援できる人も多いのではないでしょうか?

そんな冬季オリンピックをはじめ、国際大会を映したテレビでは選手の名前が紹介される際、国の名前が略名で掲載される機会が多くあります。日本の選手の場合は「JAPAN」ではなく「JPN」と表記、アメリカの選手には「USA」(United States of America)と表記されます。

国の略語は英語だけではなく、国内では漢字一文字で表記するのも時々目にします。

日本 JAPAN JPN
アメリカ United States of America USA
中国 China CHN
韓国 Korea KOR
イギリス United Kingdom of Great Britain and Northern Ireland GBR
ロシア Russian Federation RUS

2020年のオリンピックに向けて、そして近年は海外で日本ブームというのもあるようで、ホームページについても外国語対応を検討しているという会社を見かけるようになりました。多くは英語の対応になりますが、観光客として来て下さる人はアジア圏も多く、韓国語や中国語のサイトをご検討される方もいるようです。

ホームページの多言語対応の場合、どのように対応していくかというと、国別で考えるのではなく言語別で対応を考えていきます。

わかりやすいのは、サイトの表示を切り替えるボタン類。「日本語」「English」というように設置してあれば、日本国内+英語圏の人がサイトの内容を把握することができます。

そして少々わかりにくい部分としては「文字コード」や「ドメイン」にも言語別に決められたルールが存在しています。

ドメイン 日本語 言語コード
日本 .jp 日本語 ja
アメリカ (.us) 英語 en
中国 .cn 中国語 簡体 zh-cn
台湾 .tw 中国語 繁体 zh-tw
韓国 .kr ハングル語 ko
イギリス .uk/.gb 英語 en(en-gb)
ロシア .ru ロシア語 ru

「どの国の人に向けて案内をするか?」ではなく、どの言語を使っている人に対応したいのか。ホームページだけではなく、紙面についても国ごとではなく言語ごとに考えるようにしないといけないですね。

コンビニで印刷!

以前はパソコン購入と同時に手に入れていたプリンター。

最近のプリンターは性能がよくなっていたり、インクも安くなっているのかもしれませんが、私が頻繁に利用していた時には、インク残量を気にしたり、インクのにじみや発色が気になり、時には紙詰まりをおこしたり、紙送りで印字がずれたり…イライラさせられることも少なくありませんでした。

良い評判のプリンターが出るまでちょっと待ってみようかな………

そう思ってから数年。
結果買わずに不便することなくいます。

その最大の理由はネットプリント!
コンビニの複合機(コピー機)で出来る印刷です。

家からネットでデータを送って、コンビニで印刷することもできますし、USBなどのメモリーにデータを保存しておいてコンビニで印刷することも可能です。なので印刷したものを印刷物として持ち歩くことなく、必要な時に近くのコンビニで印刷すればOK!

インクと違いトナーなのでにじみが少ないので、細かい文字のデータも比較的見やすいです。

そしてコンビニの複合機の場合、定期的に業者の方がメンテナンスに来ているため、色の補正や不具合などを細かく確認してくれている場合が多いので、デザイン的な色を確認する場合には、家のプリンタを使うよりもデータに近い色をしていると感じられます。

あんまりプリンターって使わないな…と思う方。

次回買い替えの前に是非コンビニのプリンターも試してみてください。

 

(コンビニのプリンターは1枚10円(白黒)かかるので、頻繁にプリンタを使う方やコンビニ行く人が面倒な方は不向きです、すみません)

ブラウザ画面の拡大・縮小

夜になると目が疲れて、パソコンの細かい文字が読めない!

画数が多く感じが潰れて認識できない!

漢字を検索して調べたけど、拡大して見たい!

スマホの場合はピンチアウトで拡大をしてみることができます。
パソコンの場合にも画面の拡大縮小の機能がついています。

IE、Chrome、FireFox、Edgeなど、それぞれ設定のアイコンから表示を拡大縮小することができます。

また、設定アイコンからだけではなく、キーボードを使っても画面の拡大・縮小は可能です。

拡大表示 Ctrl

縮小表示 Ctrl

100%表示に戻す Ctrl0

拡大・縮小のショートカットキーはアルファベットのキーボードよりも覚えやすいので、是非使って覚えてみてください。

Yoshikiさんが食べてたお菓子が気になった

年末年始、テレビでは様々な特番が放送されていましたが、皆さんはどんな番組を見ましたか?

私の実家では特番として放送されていた「芸能人格付けチェック」を見ていました。Gackt様が毎年、超高級品を見極め続けて盛り上がるあの番組です。

その番組に今回初参戦となっていたのがXのYoshikiさん。

Gacktさん同様、次々と高級品を見極めていくのはさすがでしたが、それよりも気になったのが、控室で食べ続けているお菓子!!!

この番組は、数年前から放送されていたと思うのですが、歴代ご出演者の中で、こんなにお菓子を食べ続けているのを見たことがありません(笑)

 

高級品を当て続けてる人が、こんなにも食べ続けるお菓子って???

 

気になっていたのは私だけではなかったようで、テレビを見ながらTwitterをしていたであろう人々が「あのお菓子は何ていうお菓子なのか?」とザワザワ。
チラリとしか映らない画像を元に、なんとそのお菓子の種類、商品までを特定してしまいました!!!知りたいという欲求はスゴイです。

特定された結果………なんと、このお菓子の製造元ホームページへのアクセスが集中してサーバーダウンという状況に!

そして、それがまたネットのニュースになったりと話題になりました。

例えば商品がテレビや雑誌に紹介される場合。
事前に取材があり、放送されることがわかっていれば、特集の記事を用意したり事前の対策が可能です。

けれど今回のように、予期しないタイミングで、サーバーをダウンさせるほどのアクセスが集中するという事態、実は少なくないんです!

サーバーはダウンしてしまいましたが、そもそも商品ページの用意がされていなかったら???

製造元のサイトではなく、取り扱いのあるショッピングサイトや実店舗で購入されてしまい、せっかくの買ってもらうチャンスを逃してしまいます!

紙面の大きさが決められているチラシ等では、すべての商品を掲載することが難しい場合もありますが、インターネットの場合「これ載せる?」という商品もタイミングを逃さないために、用意しておくことも大切だなぁと思いました!

冬休み 子ども科学電話相談が面白い!

子供の素朴な疑問に専門の先生が全力で回答する「NHK子ども科学電話相談」が冬休みにも進出したそうです!
夏休みに毎回放送を楽しみにしていた身としては、これは聞かなくてはいけない!!!とウキウキ♪

ちなみに私のお薦め(推し?)先生は、

・昆虫に関する質問を担当。ゴキブリ愛が凄い、久留飛先生
・恐竜に関する質問を担当。ダイナソー小林先生
・鳥に関する質問を担当。川上先生

何がそんなに面白いのかと言うと、、、
・子供が持っている知識の中で、専門の先生が回答をしなくてはいけないという四苦八苦ぶり
・子供に興味を持ってもらえるように回答していくカッコ良さ!!
・疑問がわかった時の子供の反応!!!
自分では疑問に思ったことがないような質問が繰り広げられたりと、聞きどころは満載です。スクールも担当させていただいてる身としては、わかるように伝えることがとても重要だと勉強になります。

そんな子ども科学電話相談の中で…
「ロボットの誤作動はどうしておこるのか?」という質問が。

 

・・・・・・・・・そ、それはね(;’∀’)聞かないでっ!!!

 

プログラマーやコーディングをする人はこの回答を知っています。
そして、担当していた先生だって、当然知ってます。
なので予想通りの回答が………。

 

先生「プログラムの書き間違えたからです!」

ひぃいいいいい(>_<)

 

実はこの「子ども科学電話相談」をリアルタイムで聞いてる人達が、Twitter等でリアルタイムに実況や感想を書いてるのですが、そこでも同業者さんが阿鼻叫喚!(笑)
そして回答した先生は喜々としてお答えされてました。

一番多い誤動作はやはり「記述ミス」です。
ミスをしないように、私を含め頑張ってプログラミングをするのですが、例えばホームページの場合、1ページあたり500行~の文字を入力していきます。プログラムの場合、記述した文字に1文字でもミスがあると誤作動の原因となってしまいます。

また、プログラム忘れも「記述ミス」です。
ルンバのように家の中を掃除してくれるロボットの場合、壁に当たるまでは直進。当たったら方向を変えて別の壁に当たるまで直進…というようなプログラムが考えられます。
でもこの「直進」「壁に当たったら方向転換」だけのプログラムだと、電気がなくなるまでずーっと動き続けます。また段差があった場合のプログラムもないので、段差から落ちてしまいます。プログラムの際、どのようなことがおきるか想定して、それに対する記述をするのもプログラムです。

・直進する
・壁に直面したら方向転換
・段差に直面したら方向転換
・30分移動したら、停止する

など、どのように動かしたいのか、想定されることに対してどうするのかをプログラムで作っていきます。プログラマーは決まったことをプログラミングしていくだけではなく、どんな事が起きる可能性があるかも見極めて、どうしたいのかを確認することも重要です。

いろんな可能性を考えて、プログラムを構築していく仕事をしていますが………子供の疑問は想定外なことも多く(笑)そういう意味でも毎回楽しみな番組です!

パソコンからホームページのスマホ表示を確認する方法

若い方の中にはパソコンで文章を作成するより、スマホで文章を作成する方が早いというニュースが出ています。「論文はスマホで書く」「わからないことはスマホで調べる」そして「パソコンは何のために使うかわからない」なんてインタビューまでテレビで見てしまいました!!!吃驚!
スマホは電話+パソコンの簡易版というような認識でいるのですが、パソコンはスマホの高機能版!というような考え方もだんだん広がってきているようです。

となれば、気にしなくてはいけない…ホームページのスマートフォン対応。

調べ事をスマホでする総が増えてきているので、スマホ対応していない=探されないホームページになってきてしまいます。ホームページをスマホで見られるけど、使いにくい。これも通ってもらえないサイト、長く閲覧されないサイトになってしまいます。

そんなわけで…スマホ対応の確認を。

気になるサイトを直接検索、URLを入力するというのは少々面倒な作業です。
そこで製作サイドの人達はこんな感じでスマホサイトのチェックをしています。

 

◆自分のスマホでサイトを確認。

閲覧したいサイトをパソコンで開き、そのURLをコピーします。
GoogleやYahooの検索で「QRコード作成」で調べます。
URLをQRコードに出来るサイトが見つかるので、先ほどコピーしたURLをQRコードの画像にして、スマホでそれを読み込みます。

サイト:https://qr.quel.jp/

 

◆パソコンでスマホサイトを確認。

GoogleChromeでサイトを開きます。
画像や文章がない、背景のような場所で右クリック「検証」をクリックします。

下の画像、赤の部分にあるアイコンをクリックします。

 

画面がスマホのようなサイズに切り替わります。
画面のレイアウトが崩れたり、上手く表示できていない場合には、下記画像の部分にある表示サイズを「100%」にして、ページを再読み込みしてみてください。

 

またこの画面では、機種ごとに違う画面幅も再現できるようになっているので、上部にあるプルダウンメニューから、該当の機種を選択して画面を確認することができます。

 

 

Adobeアイコンの色に(ようやく)気づく

月刊メルシーをご存知ですか?
弊社から毎月発行している冊子です。社内の人間が毎月様々なネタで記事を書いています!ネットからもバックナンバーが見られるようになっているので、どんな人なんだろう?どんな会社なんだろう?と興味がある方は見ていただけると嬉しいです。

さて、そんな月刊メルシーの原稿を作成していく中で、ネタにしようと思っていたAdobeソフトについて調べていたところ、並べてみてようやく気が付いたことが!!!

 

Adobeソフトのアイコンの色に規則性があったんですね!
(今更!?って思うかもしれませんが、今更気が付きました…。)

 

弊社ではAdobeのコンプリート版を利用しています。なので様々なAdobeソフトを利用することができるのですが、よく使うものとなると限られてきます。
私の場合は「Illustrator」>「Dreamweaver」>「Photoshop」…といった感じ。頻繁に使うものはデスクトップやタスクバーに表示させてあります。バージョンが新しくなってもアイコンの色合いは変わらないため、デスクトップに並ぶアイコンの色はIllustrator=橙、Dreamweaver=緑、Photoshop=水色は見慣れた光景です。
他にも使用頻度は高くないですが、「InDesign(桃色)」「AfterEffect(紫)」とAdobeアイコンはソフトごとに色+アルファベット2文字で表示されています。

そんなAdobeソフトのアイコンの中に…色合いがとても似たアイコンがいくつか存在します。
それがこちら。

似たような色でまぎらわしい!
もっと別の色で作ればよかったのに!!!
…なんて思っていたのですが、、、

ジャンル別に並び変えてようやく気が付きました。
ソフトの特徴に合わせてアイコンの色も考えられていたのですね。

上記にピックアップしたアイコンは、普段使っているソフトや、過去に利用したことがあるものが中心なので、今後はアイコンの色を頼りに(!?)他のものも時間を見つけて使ってみようと思います!

パペットワープツールのセンスがほしい

少し前にAdobeCC関連のアップデートがありました。CC2018です!
Adobeが公式に紹介してくれた動画を拝見したので早速試してみました。
Illustrator/Photoshopに装備された「パペットワープツール」です。

何をするツールなのかというと、静止画に起点を作って
静止画を全体的に動かすことができます。

以前までは、女の子の携帯の位置をもう少し上にしたい場合、
下記の図のように身体をパーツごとに作り
それぞれのパーツを回転・移動させて位置を調整させていました。

当然パーツがバラバラになっていない場合には、
パーツを作るところからの作業となり、作業が大変です。

 

ところが今回搭載された「パペットワープツール」は
画像がパーツにわかれていなくても移動がとっても簡単。
動きの起点になる部分をワンクリックすると、自動的に全体が動いてきます。

上と同じ画像を使い、今度は携帯の高さと猫背を直します!

元画像→画像を統合→起点を6か所作りました。

携帯の高さと猫背直ってますか?

 

こんな感じで、全体的に少し移動が難しかったものが
このツールのおかげで簡単にできるようになりました。
Photoshopも同様の機能があるので、微調整に大変役立ちそうです!

 

ただ、このツールを使いながら感じたのは起点を打つ場所が適格じゃないと「そうじゃない!」な画像にもなりかねません(苦笑)足の前後を変えようとして失敗するとこんな感じに…

 

 

………パラッパラッパーを思い出す…。

RFC5321 メールアドレスのルール?

ホームページの不具合を調べている時に出てきたワード「RFC5321」。

調べてみたところ、メールアドレスを作る時に、一定の規則に従ってメールアドレスを作りましょうね、みたいな感じのルールが掲載されていました。おそらく自分が現在使っているメールアドレスは、問題なく使える状態の人がほとんどだとは思います。なので改めてルールなんて…と思うのですが、メールアドレスを変更することがある、新たに取得する等がある時、トラブルの起こりにくいメルアドにするために、気を付けたいことをまとめます。

「( ) , . : ; < > @ [ ] ” \」といった記号を@より前に使わない。

「! # $ % & ‘ * + – / = ? ^ _ ` { | } ~ “」をメルアドの1文字目と@直前に使わない。

「.」を連続して使用しない。

「 」スペースを使わない。

使えないことはないようなのですが、「これらを使ってメールをする場合には…」というように、使い方に条件が加わってきます。どうしても使いたい!という方には解説しているサイトがありますので コチラ をご確認ください。
またそもそもプロバイダで禁止している場合もあるので、どうしても!と思って取得したメールアドレスも上記の内容に当てはまってしまっていると、様々なところでトラブルが起きそうです。リスクを回避するためにも、上記の内容は避けた方が無難そうです。

本来であれば、そもそもルールに則っていない場合には、そのメールアドレスが取得できないようになっているとわかりやすいのですが…使えないこともないこと、また2009年より前の携帯メールアドレスは初期設定からこのルールが適用されていなかったので、今でもそのアドレスを利用している方がいる等、禁止にはしにくく、でも不具合が起きることもある状態です。

メールでトラブルがあった時には、原因の一つとして上記に該当していないか確認してみてください。

おでんの広告の謎!?

以前、弊社鈴木のブログ内にて、セブンイレブンのおでんの宣伝をしている横断幕の話題が出ていたのを覚えていらっしゃいますでしょうか?

見かけた横断幕は細長い横長で、文字であらわすと

 

ありがとう \おでん/

 

斜線の部分は緩くカーブをしているデザインです。白地に赤で描いてありました。

おでんを器に盛っているようなデザインなのですが、
お皿の底部分は見切れていて「おでん」のサイドにだけカーブを描いた線がある状態です。

お皿に盛っているイメージなのかな?
いや、あれは顔文字ヾ(o´∀`o)ノ♪←のように、おでん万歳!みたいな手なんじゃないか?
そもそも何か伝わらない段階で、デザインとして駄目なんじゃない?

などと、健康診断に行く道中に盛り上がっていました。
この時、まだおでんは始まっていなくて、全貌がわかっていなかったのですが…

先日セブンイレブン店内で見かけたのは、人の顔、口の部分としてカーブが使われていました!

ニッコリとした口元です!
口だったのか!!!
と思い、店内をいろいろ見渡せば、ポスターにはおでんのお皿として、手書きのポップには日本の国旗のような形で赤丸と曲線が描かれていました。

 

一瞬見た時には「何を表しているんだろう?」というデザインは、様々な形で使えるデザインだったのです。

 

デザインを考える時に、わかりやすくデザインすることも重要です。

けれど今回のように、一つの形がいろいろな意味を持って使えるデザインというのも、様々な展開がしやすく、遊び心を感じます。また、あえて漠然とさせることで「なんだこれ?」と見てしまい、印象に残ります。もちろん上手くデザインをしなければ、ただ意図の伝わらない駄目なデザインになってしまうのですが(汗)

「なるほど!」な素敵なデザインを見つけた時、ちょっと嬉しくなります!