お願い、フォントをかえさせてスマートフォン用の表示で見るお願い、フォントをかえさせて2015年秋、グラフィックデザイナーがウェブデザイナーになりました。この広告は、90日以上更新していないブログに表示しています。2016-02-28WEBデザイナーになって衝撃だったことつめあわせウェブ・デザインわたしね、気づいてしまったんです。デザイナーのくせにデザインのこと全く書いてないということを!!!研修終わってやっと実務ってくらいなので書くことがなかったんですよねーけど、ウェブを始めて、ここは共通するなーって思ったりここは違うなって思ったことをまとめてみようと思います。試用期間も終わったことだし(笑)PCとスマホではサイズの概念が違う表現が的確じゃないですが...スマホってよーく見るとPCより画像がきれいなんですよ。解像度が高いというか、大きい画像を圧縮して出してる、みたいな。2倍の大きさでデザインを作らないといけないのです。ちなみに、それはRetinaディスプレイのせいらしくRetinaディスプレイのPCで見ると、なんか画像がぼけてることがあります。UNIQLO|ユニクロ公式サイトずっと画像粗いんだけど...ユニクロなのに...って思っていましたが自分のスペックのせいだったみたいです。そのせいで、PCはピクセルで指定するんですがスマホはみんなデバイスサイズが違うので、%で指定するのです。レスポンシブは難しいです。CSS分ければ簡単ですけどね。フォトショにはプロポーショナルメトリクスがない紙のデザイナーならきっと誰もが愛しているイラレの自動文字詰め機能?プロポーショナルメトリクスがフォトショにはないのです!!あのチェックをつけただけで文字間をいい感じにしてくれる魔法のような機能です。(OpenTypeのところにあるよ。知らない人は見てみよう!)特にわたしのように雑誌をやってた人間からしたらもう文字間は詰まってないとアレルギー反応でる!みたいな感じなんですがウェブデザイナーはほぼ気にしません。テキストで打つ部分は無理なのはわかるのですが画像で書き出すところは文字間きれいにしたい!ということで、わたしは調べました。フォトショでも似たような機能がありました。紙のデザイナーはフォトショで文字を打つことがほぼないので見落としてると思われるこれです。カーニングのメトリクスとオプティカル!ワンランク上のデザインにはかかせないPhotoshopの文字詰め「カーニング・トラッキング」のまとめオプティカルを選ぶと、甘いけどプロポーショナルメトリクスに近い状態に💓しあわせです。撮影がすごい大事レンポジの嵐です。撮影に追われる毎日を過ごしていたわたしからすると探すより撮った方が早いよって思ってしまうのですがやっぱり1からデザインをやるという機会が少ない文化だからか撮影するというのが大事になっちゃうんですよね。レンポジの嵐で、見たことあるお姉さんが各所で使われています(笑)jp.fotolia.comこの人とかすごい見ますよねw専門用語?が多い紙って専門用語って機能名ばっかりだと思うんですが専門用語がものすごく多いです。Gitにプッシュするとか、ローンチとか、マイルストーンとか...他にも覚えられないほどに...せっかくなのでこの3つを解説メモ。Hubというサービスのことです。GitHubとは、ソフトウェア開発プロジェクトのためのソースコード管理サービスです。公開されているソースコードの閲覧や簡単なバグ管理機能、SNSの機能を備えており、開発者にとって無くてはならないサービスです。GitHubを使ってバージョン管理を行っている企業も多数あります。techacademy.jpで、GitにプッシュするというのはGitにアップするということです。(アップでいいじゃんという...)ローンチローンチは、サイトをオープンするという意味です。(もうオープンでいいじゃん...)ローンチとは、新しい商品やサービスを世に送り出すことである。ローンチという表現は、WebサイトやWebアプリケーションを新たに公開する場合などで用いられている場合も多いが、それだけでなく、新商品や新サービスの公開という意味で一般的に用いられている。マイルストーンマイルストーンは、プロジェクトの節目のことです。マイルストーンとは、物事の進捗を管理するために途中で設ける節目をいう。もとは道路などに置かれ、距離を表示する標識(里程標)のこと。商品開発やシステム開発など、長期間にわたるプロジェクトなどでいわれることが多い。各マイルストーンは最終的な到達点に向かうまでの通過点であり、それぞれの時点で達成すべき事柄(達成要件)と、実際の状況を照らし合わせることで進度の調整を行う。日付で指定されるほか、イベントや行事をマイルストーンとすることもある。以上じゃないけども...たくさん出てきて、覚えてないのでとりあえずこれで。出てきたら調べてここに書きます🙆データづくりが汚いと命取りイラレで紙データを作っているときは初めから終わりまでひとりでやることが多いのでどんだけ汚くても他人に迷惑をかけないと思うのですがウェブデザインは、画を作る人とコーディングする人が違うことも多いのでデータが汚いと勘違いや時間のロスにつながります。そこでわたしが気をつけているデータづくりのポイントをご紹介☝️レイヤーは、ヘッダー、各コンテンツ、フッターごとに分ける塊ごとにグループを分けるレイヤー名、グループ名をつける非表示はhover用に使い、使わないものは「ゴミ箱」レイヤーに入れる適当な数値で置かず、縦をきっちり合わせるこの4つは絶対にやった方がいいです!4つ目に関しては紙のときもやってましたがコーディングがあるウェブでは神経質なくらい気をつけた方がいいです。ないとコーディングのときほんと困る!けど、汚いデータは多い気がする...🌀ちなみにわたしはそれを良きに計らえと捉え勝手にいい感じに変えてます。WEBデザイナーは、生粋のデザイナーとは限らない紙のデザイナーって社会人経験=デザイナーって人がほとんどだと思うのですがWEBは前職はデザイナーやってなかったっていう人がけっこういるなぁという印象です。それは良くもあり、悪くもありかなーWEBデザインは純粋なデザイン力とは違う気がします。ぶっちゃけそれほどデザイン力がなくてもWEBデザイナーにはなれます。それよりも分析力とかトレンドを掴む力とかの方がもしかしたら大事かもしれない。アーティスト気質の人は、紙よりさらにつらいかもしれません。