お願い、フォントをかえさせて

2015年秋、グラフィックデザイナーがウェブデザイナーになりました。

WEBデザイナーになって衝撃だったことつめあわせ

わたしね、気づいてしまったんです。

 
デザイナーのくせにデザインのこと全く書いてないということを!!!
 
研修終わってやっと実務ってくらいなので
書くことがなかったんですよねー
けど、ウェブを始めて、ここは共通するなーって思ったり
ここは違うなって思ったことを
まとめてみようと思います。
試用期間も終わったことだし(笑)
 
 
 

PCとスマホではサイズの概念が違う

表現が的確じゃないですが…
スマホってよーく見るとPCより画像がきれいなんですよ。
解像度が高いというか、大きい画像を圧縮して出してる、みたいな。
だから、2倍の大きさでデザインを作らないといけないのです。
 
ちなみに、それはRetinaディスプレイのせいらしく
RetinaディスプレイのPCで見ると、なんか画像がぼけてることがあります。

f:id:emo_momomo:20160228125954p:plain

ずっと画像粗いんだけど…ユニクロなのに…って思っていましたが
自分のスペックのせいだったみたいです。 
 
そのせいで、PCはピクセルで指定するんですが
スマホはみんなデバイスサイズが違うので、%で指定するのです。
だからレスポンシブは難しいです。
CSS分ければ簡単ですけどね。
慣れないと難しい。
 
 

フォトショにはプロポーショナルメトリクスがない

紙のデザイナーならきっと誰もが愛している
イラレの自動文字詰め機能?プロポーショナルメトリクスが
フォトショにはないのです!!
あのチェックをつけただけで文字間をいい感じにしてくれる
魔法のような機能です。
(OpenTypeのところにあるよ。知らない人は見てみよう!)
 
特にわたしのように雑誌をやってた人間からしたら
もう文字間は詰まってないとアレルギー反応でる!みたいな感じなんですが
ウェブデザイナーはほぼ気にしません。
テキストで打つ部分は無理なのはわかるのですが
画像で書き出すところは文字間きれいにしたい!
ということで、わたしは調べました。
 
フォトショでも似たような機能がありました。
紙のデザイナーはフォトショで文字を打つことがほぼないので
見落としてると思われるこれです。
 
カーニングのメトリクスとオプティカル
 

f:id:emo_momomo:20160228133516j:plain

オプティカルを選ぶと、甘いけどプロポーショナルメトリクスに近い状態に?
しあわせです。
 
 

撮影がすごい大事

レンポジの嵐です。
撮影に追われる毎日を過ごしていたわたしからすると
探すより撮った方が早いよって思ってしまうのですが
やっぱり1からデザインをやるという機会が少ない文化だからか
撮影するというのが大事になっちゃうんですよね。
だからレンポジの嵐で、見たことあるお姉さんが
各所で使われています(笑)
 

キッチンでスマホを見る女性

jp.fotolia.com

この人とかすごい見ますよねw

 

専門用語?が多い

紙って専門用語って機能名ばっかりだと思うんですが
専門用語がものすごく多いです。
Gitにプッシュするとか、ローンチとか、マイルストーンとか…
他にも覚えられないほどに…
 
せっかくなのでこの3つを解説メモ。
(わたしも今調べた!笑)
  • Gitにプッシュする

GitというのはGit Hubというサービスのことです。

GitHubとは、ソフトウェア開発プロジェクトのためのソースコード管理サービスです。

公開されているソースコードの閲覧や簡単なバグ管理機能、SNSの機能を備えており、開発者にとって無くてはならないサービスです。

また、GitHubを使ってバージョン管理を行っている企業も多数あります。

で、Gitにプッシュするというのは
Gitにアップするということです。(アップでいいじゃんという…)
 
  • ローンチ

ローンチは、サイトをオープンするという意味です。(もうオープンでいいじゃん…)

ローンチとは、新し商品サービス世に送り出すことである。日本語では「立ち上げ」「公開」「開始」「発進」などの語が相当する。ローンチという表現は、WebサイトWebアプリケーション新たに公開する場合などで用いられている場合も多いが、それだけでなく、新商品や新サービス公開という意味で一般的に用いられている。

 

マイルストーンは、プロジェクトの節目のことです。

マイルストーンとは、物事の進捗を管理するために途中で設ける節目をいう。もとは道路などに置かれ、距離を表示する標識(里程標)のこと。商品開発やシステム開発など、長期間にわたるプロジェクトなどでいわれることが多い。 各マイルストーンは最終的な到達点に向かうまでの通過点であり、それぞれの時点で達成すべき事柄(達成要件)と、実際の状況を照らし合わせることで進度の調整を行う。日付で指定されるほか、イベントや行事をマイルストーンとすることもある。

 

 以上です。以上じゃないけども…

たくさん出てきて、覚えてないのでとりあえずこれで。

また出てきたら調べてここに書きます?

 

 

 データづくりが汚いと命取り

イラレで紙データを作っているときは

初めから終わりまでひとりでやることが多いので

どんだけ汚くても他人に迷惑をかけないと思うのですが

ウェブデザインは、画を作る人とコーディングする人が違うことも多いので

データが汚いと勘違いや時間のロスにつながります。

 

そこでわたしが気をつけているデータづくりのポイントをご紹介☝️

  • レイヤーは、ヘッダー、各コンテンツ、フッターごとに分ける
  • 塊ごとにグループを分ける
  • レイヤー名、グループ名をつける
  • 非表示はhover用に使い、使わないものは「ゴミ箱」レイヤーに入れる
  • 適当な数値で置かず、縦をきっちり合わせる

この4つは絶対にやった方がいいです!

4つ目に関しては紙のときもやってましたが

コーディングがあるウェブでは神経質なくらい気をつけた方がいいです。

じゃないとコーディングのときほんと困る!

けど、汚いデータは多い気がする…?

ちなみにわたしはそれを良きに計らえと捉え勝手にいい感じに変えてます。

 

 

 WEBデザイナーは、生粋のデザイナーとは限らない

紙のデザイナーって社会人経験=デザイナーって人がほとんどだと思うのですが

WEBは前職はデザイナーやってなかったっていう人が

けっこういるなぁという印象です。

それは良くもあり、悪くもありかなー

 

WEBデザインは純粋なデザイン力とは違う気がします。

ぶっちゃけそれほどデザイン力がなくても

WEBデザイナーにはなれます。

それよりも分析力とかトレンドを掴む力とかの方が

もしかしたら大事かもしれない。

だからアーティスト気質の人は、紙よりさらにつらいかもしれません。

そんな気がします。

 

 

 

はい。こんな感じでしょうか。

 

WEBデザイナー的に吸収することは

ものすごく多いんですが

書くことがない?どう書いていいかわからない?から

これから何かしら連載しようと思います。

 

どうしようかなー