よく見るロゴやマークが今後変わる?

今はほとんど使われていないのに、マークとしてはいまだに現役というマークが結構存在しています。

例えば電話マーク!ホームページを作る時にも「電話で問い合わせ」のアイコンとして、ダイヤル式の電話マークを使うことは少なくありません。世間的な利用率で行けば圧倒的にスマートフォンなのですが、ダイヤル式の電話を使えない世代の方でもマークとしては電話だと認識できていると思います。

またパソコンのソフトで保存をするアイコン・マークはフロッピーデスクです。もう使っている人も、知らない人もいるのにこのマークを使っているソフトは数多くあります。

デザインは流行を追うことの大切さもありますが、それとは別に多くの人に理解してもらえることも求められる場合があります。斬新なデザインは目新しく、かっこよくも見えますが、新しすぎてついて行けない人が続出です。

そしてアイコンやマークは限られたスペース内に簡潔なデザインで伝えるという場面が多くあります。電話のマークの場合、スマホユーザーが増えたことを考慮し、スマホのような長方形にデザインをすると、新規ファイルを作成する紙のマークに似てしまったり、スマホは電話だけでなくwebの閲覧にも使えるので混乱を招きます。

2020年のオリンピックに向けて、温泉のロゴ論争や、トイレのマークなど様々な見直しがされています。新しいマークを目にする機会も多くなると思うので、注目してみてみるといろいろ面白いかもしれません。

拡張子は表示する?表示しない?

拡張子はファイル名を付けて保存した際、保存名の後ろにつけられるアルファベットや数字のことを言います。

・保存名.pdf
・保存名.txt
・保存名.mp3
・保存名.wma
・保存名.jpg
・保存名.ai  などなど。

昔のパソコンは拡張子がデフォルトで表示されていた為、このアルファベットが見られる状態が普通でした。ところがVistaあたりから非表示がデフォルトになり、表示させる方法を知っている人だけが拡張子を表示させて使っています。

仕事柄、様々なファイルを取り扱う為、私はこの拡張子を表示させておかないと使いにくいのですが…。そもそも表示できることを知らない世代というのも増えていて、時々「不便じゃない?」と聞いてしまうことがあります。

返ってくる回答としては「アイコンでどのソフトのものかわかるから大丈夫」というのが多いのですが、これまた古くからパソコンをよく使う身としては、いやアイコンは拡張子から関連付けてるだけで、拡張子の判断にはならないでしょ!???と。

こんな話しを、友達にしていたら、パソコンに詳しくない人は普通知らないと言われました。
私、普通じゃなかった…。

 

そんなわけで、どうして拡張子を表示しなくなっちゃったの!?という話題から。

 

拡張子は、このファイルがどんなファイルなのかを示しています。
なので、ファイルの名前を変更しようとした時、うっかり拡張子ごと変更をかけてしまうと、何のファイルだかわからなくなってしまうのです。実際Vistaの前まで、お客様から「名前を変更したらファイルが開けなくなった」というトラブルが少なくありませんでした。どこでWindowsは「だったら拡張子変えられないように非表示にしよう!」←これが拡張子を表示しなくなった理由…という説をよく見かけます。

じゃあ何故拡張子が表示されないと困るのか。アイコンだけじゃダメなの?
アイコンだけじゃダメです!!!
例えば画像ファイルを例に説明します。写真の拡張子はrow、jpd、画像データはpng、gifなどがあります。
この4つの拡張子はすべてPhotoshopというソフトで開くことができます。更に、photoshopで編集途中のデータではpsdなんてのも存在ます。細かく言えば更に複数の拡張子をPhotoshopは取り扱えます。なので、どのアイコンもPhotoshopのアイコンになる(することもできる)ということになります。

ファイルを詳細表示にして選ぶ人は、詳細から拡張子を確認できますが、サムネイルのまま画像を使う際には元の画像の拡張子を知っておくことは重要です。

 

また、いろいろ調べていたところ、セキュリティなどを管理されている部門から、拡張子を表示させていないことで発生するトラブルとして、拡張子の認識が薄れ、見覚えのないファイルも気軽に開いてしまいウイルスに感染…という話しも聞きました。

出来れば拡張子、デフォルトの設定に戻してほしいなぁと、個人的には思います!

手書きで地図を描く時のコツ

カーナビやgoogleマップの活躍で手書きの地図を描く機会は昔より少なくなってしまいましたが、名刺やハガキなど、限られたスペース内に地図を入れたい場合、オリジナルのデザインで地図を作製することがあります。

形のないものをデザインするのはデザイン力が必要だと理解してもらえるのですが、地図もなかなかデザイナーさんの力量が問われるんですよ♪
学生時代、課題として取り上げられたりもしています。
知っている道を絵にする、マップの不必要な個所を抜いて書けばいい…簡単なことのようでいて、やってみると難しいのです。

ということで、今回は地図を描く時のコツをまとめてみました。

用紙の上が北になるように地図を書く。

東西南北を日常的に意識しているかは別として、駅の出口も「北口」「南口」など、東西南北で示しています。
駅から北口改札を出ると、背にしている側が南と認識します。
地図の東西南北が逆、もしくはずれていると、所見で目的地に向かう人は迷いやすいです。

画面を横切る道路・線には「至」をつける

東西南北がわかるように、地図のどこかに北を示すマークを入れることもありますが、画面を横切る主要な道路、線路などには「至 東京」「至 大阪」などを入れて表記しています。東西南北の目安にするためなので、1か所あれば大丈夫です。

目的地にどんな手段で来るかを想定する

目的地がわかりにくい場所だと、目的周辺を細かく書きすぎて、そこまでに至る道が入っていない!というような地図をたまにみかけます。バスで来る人には最寄りのバス停、電車を使う人には駅、高速で来る人にはインターを入れる必要があります。

掲載するルートを絞る

目的地たどり着くための道は複数あると思います。限られたスペースに描く地図には、主要ルートに絞って描くようにします。地図を見ながら来る人はその場所に不慣れな人なので、一番わかりやすいルートのみを描くことをおすすめします。

短縮できる場所は省略する

横長の用紙に縦長の入れる場合、実際は縦長な直線距離を短縮して描くことがあります。目的地にたどりつくには、曲がる箇所がポイントになります。エリア内に収めるために、省略できる時には省略してます。

交差点・信号機・交差点名

道路が交差している箇所は複数あり、幾つめの曲がり角かをわかりやすくする為にも、交差点名や信号機があるものは区別して交差点を描くと伝わりやすいです。

交差点名のない曲がるポイントにある目印

4つ角の曲がり角にそれぞれ建物が建っていたとします。記載する建物は「知名度の高い店」「看板が大きくわかりやすい」の他に、向かっている方向から見やす建物を掲載します。また角に目印にできそうな店がない場合、手前と通り過ぎたところにある両方の建物を記載することで、通りすぎてしまった時にも気づいてもらいやすくなります。

透過データって?

「透過データでお願いします!」

「?」

「あ、背景透明で…」

「背景を透明ですか?」

というようなやりとりを、過去に数度したことがあります。
仕事で普段やっていることだと、当然相手に伝わるだろうと思って会話してしまったことありませんか?私は頻繁にやらかす方です。。。反省。

今回は【透過データ】

知っている人は知ってるかもしれませんが…
書いて字のごとく。透明になっている部分があるデータです。
上のやりとりは、デザイナーさんからサイトに掲載する素材をもらう際
背景部分は透明な状態でくださいね…という説明の省略系です。

背景が透明………て?

まずは黒色背景を指定した箇所に、普通の画像を配置してみます。

次に写真中央に黒い画像を載せた画像を配置します。
一見、中央の部分は背景の黒が見えているようにも見えますが、実際は背景が見えてるのではありません。

お次は透過データ!これは上の画像と違い、中央の画像が切り抜かれた状態(透明になっている)データです。
この画像では、背景の黒が真ん中の色として見えています。

つまり透過データの場合、背景の色を変えると…

というようになります。

これが透過してある画像です!

ホームページに画像を掲載する際、
透過させていないデータとして画像を配置させても
透過データで背景に色を入れても見え方に変わりはありません。

ありませんが、背景の色が変わる可能性があった場合、
背景の色をコーディングで変えるだけではなく
画像の方にも修正を入れる必要があります。

透過データはウェブサイトをデザインする際にはとても助かるデータです。

オリジナルグッズを作ってみませんか?

毎日暑い日が続きますね。
私は社内からあまり出ることはないのですが、日々の出勤時間少しずつ日焼けし、着ている洋服の位置で変な日焼けをしています。これ、、、多分戻らないんだろうなぁ(涙)

新しい月刊メルシーにて、オリジナルパッケージで作るお菓子の紹介をさせていただきました。夏場は暑いので、チョコレートや飴など溶けやすいものはグッズとして作る機会も少ないのですが、秋~春にかけては注文も多くなり、配っている企業や団体も多いので、面白いパッケージのものがあれば是非教えてください♪

オリジナルデザインということで言えば、道端で配っているポケットティッシュやうちわ。コンサート等で作られるグッズのタオル、Tシャツなど幅広く存在します。配布する、多くの人に買ってもらうものなので、数量がまとまっていないと注文ができない………と思われがちですが、最近はロット数が少なくても作成してくださる会社も増えてきています。

また月刊メルシーで紹介した、キッドカットのパッケージや、チロルチョコのパッケージのように、すでにある商品にプリントしてくれるメーカーのサービスというのも増えてきました。

【ユニクロ】 ユニクロカスタマイズ
http://www.uniqlo.com/customize/top.html

自分の家のプリンターで印刷したものをアイロンで貼り付けるような転写プリントもありますが、転写用の紙自体も少しお値段がするものだったり、失敗する可能性も考えると、注文してしまった方が綺麗に安くできてしまったりもします。
(ただし納期があるので、すぐに欲しい人は難しいですね)

昔は無かったサービスも、ネットで検索すると意外と見つかったりすることも増えてます。「こういうサービスあったらいいのにな?」…と思うことは、検索するのは無料!是非調べてみてください♪

データーのお引越しエクスポートとインポート!

日本語にしてもらえればわかりやすいのに、英語で説明されると混乱するのは何故なのか…。
それは英語が苦手だからです(涙)
もっと真面目に英語の勉強をしておけばよかったと今更ながら反省してます。

今回はエクスポートとインポートについて。
「export(輸出)」「import(輸入)」という意味だそうです。ファッション関係では「インポートブランド」とか聞くことがあります。輸出/輸入と言うとインターネット上でどんな役割かわかりにくいのですが、簡単に言ってしまえばデータのお引越しです。

  • 筆ぐるめの住所録を書き出し、筆まめクラウド住所録へインポート
  • Outlook ExpressのデータをWindows Liveメールへインポート
  • LINEトークのバックアップとインポート
  • ライブドアブログからアメーバブログへ、エクスポートインポートで持ってくる

というような文章、言い方をしています。

古いパソコンにある住所録を、新しいパソコンにした時全部入れなおさなくてはいけない…
数年書き続けていたブログを引き継げない…
これではとっても不便ですよね。

エクスポートは現在使っているデータを荷造りして引っ越せる状態にすること。
インポートは荷造りしたものを、新しい場所へ配置すること、というようなイメージです。

エクスポートはバックアップと似ている感じもしますが、少し別物になります。
バックアップはデータをそのまま保存します。
エクスポートは引っ越し先でも使えるようなデータにします。

例えば…
[引っ越し前]アメブロ→[引っ越し先]アメブロ
この場合、バックアップデータでも大丈夫。

[引っ越し前]アメブロ→[引っ越し先]楽天ブログ
この場合、バックアップデータは使えません。エクスポートで引っ越します。

ブログの仕様が会社ごとに違っているので、バックアップデータをそのまま反映させようとすると、その仕様が引っ越し先にはなかったりして、正しく引っ越しができません。
エクスポートは引っ越し先で受け入れられるようなデータにする作業です。

そしてインポートは、エクスポートしたデータを引っ越し先に入れる作業です。
ほとんど新しい場所に適した形でデータを引っ越してくれます。

どちらの作業もボタン一つで終わることも多く、多少の操作があったとしても、データを入力しなおすよりとても早く完了できる作業です。
お引越ししたいデータがある場合、この機能があるかを確認してスムーズにお引越しをしてみてください。

WebデザイナーとDTPデザイナー

どちらもデザイナーとついているから一緒!………とは言えません。実は。
DTPデザイナーさんにWebのデザインを依頼しても困るし、WebデザイナーさんにDTPのデザインを依頼しても、印刷の段階でいろいろ問題が発生します。似ているようで結構違うんです。

ココが違う1 使える色・解像度

以前ブログの記事で書いたこともありますが、ホームページはモニター(画面)で閲覧。DTPは印刷物です。モニターは光で色を表現するので、鮮やかな色の発色もよく、パールカラーの色も再現しやすいです。一方DTPはインクを混ぜて色の表現をするので、淡い色の表現が苦手だったりします。Webデザイナーは普段RGBカラーでデザイン、DTPデザイナーはCMYKカラーを使用するので、完成データのカラーモードがそもそも違います。
また画像のきめ細やかさを示す「解像度」。これもWebとDTPではかなり異なります。

ココが違う2 サイズ

DTP(紙面)の場合。完成された時のサイズは決まっています。A4サイズ、B4サイズと先にサイズが決定していて、その中にパーツを配置していきます。デザイナーはそのレイアウトを上手く配置し、目に留まるデザイン、見てもらえる内容に仕上げていきます。それに対しWebは…仕上がりのサイズが決まっていません。パソコンのように横長の画面で見ている人もいれば、スマホで閲覧している人は縦長です。画面のサイズがどんな状況であっても綺麗に見えるようなデザインをしなくてはいけません。DTPデザイナーさんは、このサイズが定まらないのにデザインをするというのが難しいようです。逆に、Webデザイナーは普段用紙の中にものを納めなくても、スクロールさせる、クリックしたら別のページというようなデザインもできるため、エリア内に収めることや、印刷で出せる最小の文字サイズや線の太さの感覚が曖昧です。

ココが違う3 自由度

DTPは新聞に入れる、ポスターで貼る、お客様に配るなど、見てもらう人数を先に想定してその枚数印刷します。優れたデザインであることがベストではありますが、少々残念なデザインであっても新聞の折り込み広告として入っていれば見てしまう人もいます。ところがホームページのデザインは、検索でサイトを表示してもらえないことには見られないものです。極端な話しになってしまいますが、優れたデザインであってもSEO(検索対策)が整っていない限り、発掘されないサイトです。そこで、検索>デザインとなってしまうこともあります。例えば、サイトのトップページがおしゃれで1文字の文字もないようなサイトだと、そのぺーじに文字が存在しないとで検索としては評価しにくいサイトになってしまいます。文字をある程度入れて、これを入れると検索上位になるというルールの上でデザインが必要になったりします。自由にデザインするという意味では、Webだと制限がいろいろできてしまいます。

このように、WEBのデザイナーとDTPデザイナー。どちらもIllustratorやPhotoshopで制作は出来ても、デザイナーとして必要な知識やルールがそれぞれ異なっているので、それぞれ専門のデザイナーさんに依頼することをおすすめします。

もちろん弊社ではDTPもWebも知識を持ったデザイナーが所属しています。
どちらもまとめてのご依頼も大歓迎!!!
むしろ同じ会社にお願いしておけば、元データや使ったものを共有しているので制作しやすかったりします。片方しか作ったことはないけれど、Webサイトに興味が出てきた、サイトの更新はしているけどDTPのデザインが必要になったなど、気軽にご相談ください。

静的ページと動的ページって何?

職場内では通じてしまうので、うっかりお客様相手にも使ってしまう用語があります。聞いた方がすぐに「?」という表情をしてくれたり、直接聞いていただければお答えできるのですが、こちら側のニュアンスとして「(当然)知ってますよね?」なんて空気が出ていると、質問されることもなく、相手に伝わっていないまま会話を続けてしまうことも…。

今回はホームページ制作の現場で使われる用語の中から「それってどういうこと?」と時々質問の入るワードについて、専門的な解説ではなく、理解してもらうために極力わかりやすく説明します。

◆静的ページと動的ページ

ホームページを作成する時、どんなページを用意したらいいかの打ち合わせでこのワードを使ったりします。
静的ページというのは文字通り、サイトを表示させるだけのページを示します。一般的なページはほぼ静的ページだと考えてもらえば大丈夫です。私たちのようなコーダーにHTMLを書いてもらい、それをネット上に公開します。変更や修正する部分がある場合には、制作した人に連絡しこの部分を直してほしいと依頼。ネット上にあがってるものをダウンロードして編集したのち、ネット上に上げなおし(上書き)します。

これに対し動的ページというのは、ページを閲覧しに行く度に表示のされ方が一定ではないようなページを示します。例えばトップページに新着情報を設けている場合。新着情報は最新の記事を毎回表示されるようにしています。ランダムで画像を表示したりするのも該当します。またお問合せフォームでも、必須項目に記載がない場合にはエラーを表示させるという指示が出されています。ただ表示させているだけではない部分を「動的要素」というような言い方をし、これを含めるページを動的ページと言います。

静的な作りにする場合には、更新や修正があった場合、弊社に依頼をしていただき、本部や掲載する画像をいただいた状態で作業に入ります。量や内容にもよりますが、作業時間が発生するため、更新するのに料金が発生します。
動的なページで作る場合、お客様が投稿した内容を自動的に読み込むようにサイトを作ります。更新も修正もお客様にやってもらうような作り方です。上記がHTMLで作成するのに対し、動的なページはPHPで制作したりします。ホームページの作り方が全く異なります。その為、打ち合わせをさせていただく段階で、どのようにページを使うのかを確認させていただいてます。

ホームページと家づくりは似てる!?

ホームページの制作とは、どんな感じなのか。

全くホームページの知識がない人、ホームページを作ろうとしている人、制作の仕事に携わろうと勉強する人に聞かれた場合、よりわかりやすく説明する為、「家を建てる」のを例に挙げて説明することがあります。
家の購入は高額なるため、かなり慎重に検討すると思います。ところがホームページに関して…作る手順は家と同じような作り方をするのですが、検討があまりされないまま依頼される方も少なくありません。家のように一生に1回の買い物では無いかもしれませんが、ホームページは家よりも他者に見てもらうもの。より完成度の高いサイトを作るためには、家を建てる時と同じように、しっかりと検討することが重要です。

ということで、今回は手抜きをするとどんなことになるのか!
家の購入に例えながら、簡単に紹介しようと思います。

 

◆土地の購入/サーバの選択
ホームページを公開するために、自社サーバーで作るのか、レンタルサーバーの場合はどこの会社のどのプランが適しているのかを調べます。家を建てようと思った場合、近くにどんな施設があるのか、住み心地はいいのか、購入しようとしている場所について事前に調べたりする人が多いと思います。これと同じように、ホームページも公開する場所によって特色があり、データ量の制限、サーバーの仕様、サポートの有無など、どんなホームページを作るのか(どんな家を建てるのか)によって、適している場所があります。どんな家を建てる予定か、決まっていなくても土地は購入できますが、購入した土地ではやりたいことができない、家を建ててから住みにくかった…ということを防げます。

◆設計・デザイン
「土地を購入・サーバー」の確保ができたら、そこに建てる「家・ホームページ」の設計をします。上記で書いたように、確保した場所によって、土地の広さや景観についての制限など、全く自由に設計・デザインができるわではありません。できることの範囲内で設計・デザインをしていきます。部屋はいくつ必要なのか、駐車場のスペースは何台分なのか、キッチンの場所はここで大丈夫なのか?など。また2階建ての場合、2階にトイレは必要か?ホームページも家づくりと同じで、どれくらいのページが必要なのか、このページのメニューボタンはどこに配置するべきなのかを考えます。設計をする際、これを適当に考えてしまうと、見てほしいページのボタンが見つかりにくかったり(陽の入らない部屋を作ってしまうような感じ)、家具を入れたら思っていた以上に狭い部屋になってしまったなど、住みにくい家、見にくいサイトになってしまいます。
希望、要望をデザインに反映させてみて、施工が難しい場所、修正が必要そうな場所、あった方が良いものなどをお客様にお伝えし、デザインを決定させます。

◆建設工事・コーディング
設計図を元に、家を建てる作業に入っていきます。私はコーディングの仕事を中心にさせてもらうことが多いので、少し細かく内容を説明します。コーディングは設計図を元に何も考えずコードを記述していくこともありますが、将来的にこれが必要になるかも…、昔はこのやり方だったけど現在はこちらの素材の方が有効的…など、見た目のデザインではない部分も検討しながら作っていきます。家で例える、断熱材や土台など目に見えない部分の内容です。今までの打ち合わせ内容を確認し、現状できること、今後ありえそうなこと、やっておいた方がいいことを考えた上で制作をしていきます。ただ作るだけの場合、増改築が難しくなったり、耐久面(サイトの寿命)としても長いとは言えません
この作業まで入ってしまうと、デザインの変更やページの追加が難しくなってきます。

◆電気、ガス、水道工事・プログラミング
生活するのに必要な業者に入ってもらい、使えるようにしてもらう作業です。ホームページでいうと、お問い合わせフォームやブログ機能だったりします。工事を行っていないと、絵的には完成しているように見えますが、ボタンを押しても動作しないという状況です。1つ前の段階で、変更できない部分が多くなってきますが、プログラムも同じで、お問い合わせフォームに必要な内容など、しっかり決定しておかないとその後の変更・工事は別途費用がかかってしまったり、納期が遅れる原因にもなります。

◆届け出・SEO登録
完成したら住所や名義など、役所に届ける内容がいくつかあると思います。それと同じようにホームページもサイトを作って公開しましたという報告を、検索サイトにします。

 

手順としては、このような形でホームページも制作公開をしています。
完成後、作ったサイトの写真を差し替える、文章の変更などは、畳や障子の貼り換え作業のようなものなので、あまり時間をかけずに対応できるように設計・建築をしてあるのですが、2階にも浴室を追加してほしい………ともなると当初の設計には無い部分なので、かなり無理のあるリフォームになってしまうこともあります。

せっかくお金をかけて作るホームページ。よくわからない、面倒とは思わずに、検討・ご相談いただいて、少しでも多くの人に利用しやすと思ってもらえるサイトにしていただきたいです!

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

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

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

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

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

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

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

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

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

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

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