Webデザイン備忘録

Webデザイナーのデザインメモ

スマホデザインのモックアップ

のろのろ更新の戒めブログですが、内容を考えすぎたり盛り込みすぎると進まないので、本当に備忘録程度のメモでも載せていこうかなあという所存です。

 

デザインを提案する際に、PCレイアウトとスマホレイアウトのカンプを作成するかと思います。

今までは、スマホ実機で見た時にそれっぽく見えるよう、カンプ画像表示サイズの最大値だけを決めてその値よりブラウザ幅が小さい時は画像が伸縮するようなページを作成して提出していました。

 

しかしどうやら実機で見る人もブラウザを縮小する人もいないもよう…ただの大味なスマホ画像がぺろーんとページど真ん中にでている状態で見られることが多いなあと思い、より実際の使用感をイメージしやすそうなページを作成してみました。

 

Blisk風なレイアウト

 

スマホ実機で見た時の表示をしてくれるブラウザ「Blisk」(開発者ツール使えるのでバグ修正の時など超便利)風に、スマホのガワ画像の中で中身がスクロールするように見せられたらええんちゃうん、とこんなの作ってみました。

▶︎Blisk参考URL:https://nelog.jp/blisk

●カンプを見せたい場合

f:id:ayarpyyy:20170711230842g:plain

画像を見せたい場合は表示領域を指定した要素内に画像を乗っける。

※中身はクマジェネレータです。特に意味はありません。

See the Pen iphoneモックアップ用:その1 by ayarpy (@ayarpy) on CodePen.

●コーディングしたページを見せたい場合

f:id:ayarpyyy:20170711230717g:plain

すでに実装済みのページを見せたい場合は、iframeを使用。

※中身は以前作成したCSSおばQのページです。特に意味はありません。

See the Pen iphoneモックアップ用:その2 by ayarpy (@ayarpy) on CodePen.


モックアップページをスマホ実機で見た場合の一手間

PCで見た時はBlisk風に表示、スマホで見た時は中身だけ表示をさせるための一手間。

PC閲覧用、スマホ実機閲覧用と2つのページを作らず一つのページで済むので親切&便利・・・アメイジング・・・

PHPのユーザーエージェントで PCかスマホかを判定し、スマホの場合はモックアップのガワを取るだけです。

codepenでその記述をしたところ、認識してくれなかったので別途記述したいと思います。

 



画像で見せる場合の書き方

<?php
$ua = $_SERVER['HTTP_USER_AGENT'];
if ((strpos($ua, 'iPhone') !== false) || ((strpos($ua, 'Android') !== false) && (strpos($ua, 'Mobile') !== false))
|| (strpos($ua, 'Windows Phone') !== false)
|| (strpos($ua, 'BlackBerry') !== false)) { ?>
	<?php /* ▼ここにSP用の内容 */ ?>
	<h1>画像を仕込む場合</h1>
	<p>
		<img src="image/kuma.jpg">
	</p>
	
<?php } else{ ?>
	<?php /* ▼ここにPC用の内容 */ ?>
	<p class="text">※スマホ画面内でスクロールして<br> 見ることができます。</p>
	<div class="iphone-top"></p></div>
		<div class="nakami">
			<h1>画像を仕込む場合</h1>
		</div>
	<div class="iphone-bottom"></p></div>
<?php }?>

 


iframeで見せる場合の書き方

<?php
$ua = $_SERVER['HTTP_USER_AGENT'];
if ((strpos($ua, 'iPhone') !== false) || ((strpos($ua, 'Android') !== false) && (strpos($ua, 'Mobile') !== false))
|| (strpos($ua, 'Windows Phone') !== false)
|| (strpos($ua, 'BlackBerry') !== false)) { ?>
	<?php /* ▼ここにSP用の内容 */ ?>
	<iframe src="inner.html" width="100%" height="100%"style="border:none;"></iframe>
<?php } else{ ?>
	<?php /* ▼ここにPC用の内容 */ ?>
	<p class="text">※スマホ画面内でスクロールして<br> 見ることができます。</p>
	<div class="iphone-top"></p></div>
	<iframe src="inner.html"></iframe>
	<div class="iphone-bottom"></div>
<?php }?>

 

そんなかんじです。

スマホ画面の表示領域は中身が綺麗に見えるサイズにCSSで調節してくだせえ。

 

 

デザインカンプができるまで

f:id:ayarpyyy:20170430001945j:plain

デザインカンプを作るまでの工程はデザイナーさんそれぞれで違うと思うのですが、直近の案件で師匠のやり方を教えていただき、同じように作成してみたところはかどったので、そのやり方をば書きたいと思います。

主な制作フロー

  1. 対象のサイトについての情報収集
  2. 構成要素の書き出し、精査
  3. ワイヤーフレームの作成
  4. イメージの近い参考サイトやパーツ探し
  5. 参考パーツで組み立てたカンプもどきを作成
  6. デザインカンプの作成

うーん文字に起こすと当たり前なことばかりだ…

私は今まで「5」をしておらず、これがあることでとってもイメージがわきやすくカンプの作成がいつもよりスムーズに行えたと思いました。

対象のサイトについての情報収集

情報が0からデザインすることなんてものすごい天才しかできないのでは…

クライアントとユーザーに気に入ってもらえるデザインを作るにはヒントが必要なので、そのヒントを自分で作ってゆく作業です。探偵です。

何を推しているのか、ターゲットの年齢層やロゴの雰囲気から連想してコンセプトを決定していき、サイトのデザインイメージをもわもわと脳内でつくります。

構成要素の書き出し、精査

トップページ、下層ページに何があるかグーグルさんのスプレッドシートとかに書き出して、これはいるかな、これはいらんだろ、というのを精査していきます。

サイト全体の構成要素と、作るページの構成要素を書き出しておけばワイヤー作る時に便利。

ワイヤーフレームの作成

WEBデザインの教本やサイトなどでは、ソフトを使って綺麗なワイヤーを作られていることが多いため、最初は私も製図のように作成していましたが、最近はもっぱら手書きになりました。

ソフトを使ってその通りカンプが進めばよいですが、いざ画像やデザインしたテキストを入れた時に「思ってたんとチガウ…」ってなるので、絶対になるので、ワイヤーの時点で気合いを入れなくてよいと考えています。

下層ページやパーツをデザインする時、イメージをかためるためにメモ帳にぐちゃぐちゃと書いててハッと、これってワイヤーと同じ役割じゃんて思いました。ならワイヤーだって手書きのなぐり書きでいーじゃん!その方が早いじゃーん!と。

参考サイトやパーツ探し&カンプもどきの作成

イメージの参考になるサイトを見まくる&参考になるパーツがあったらキャプチャをストックして、イラレのアートボードの枠外にベタベタと貼り付けていきます。悩んだ時にすぐ参考にできる!べんり!

その参考集からパーツを切り出し、ワイヤーどうりにペタペタはっていき、カンプもどきを作成。

パクリになってはいけないのでそのままデザイン盗むなんてことはないですが、参考があるのとないのでは作成スピードが全然違うと思いました。

コンセプトやテイストが固まってるとはいえ、やっぱり目に見えるものがない状態で過去にインプットした情報をアウトプットしていくのは結構無駄な時間使ってしまうまー

カンプの作成

本番!私の作り方としては、大まかな位置を四角でマークアップして、ここにはこれが入るよーというのをざざっとメモがわりに置いていき、全体ができあがったところでパーツを作って配置していきます。

そこからブラッシュアップして洗練、ひたすら洗練…

そんなかんじでございます。

 

しかし、カンプ作成の時にエリアをマークアップしていくのはもうワイヤーの役目を果たしてるので手書きワイヤーすっとばしてカンプ作成時のアートボード上でやってしまえばいいのかも、とか

ワイヤー組むのとカンプもどき作るのどっちが先の方がスムーズにいくのかとか

はたまたもっとやりやすい方法があるのか、まだまだ自分のやり方は模索中です…

とりあえずカンプもどきつくるとはかどったよの話でした。

  

 ↑この本にはWEBデザイナーさんはほとんど載っていませんでしたが、こんなイメージでWEBデザイナーさんのワークフロー本ほしい…

 

うっかりミスを防ぐために

f:id:ayarpyyy:20170211224945j:plain

 

とても公言できたものじゃないのだけれど、私はうっかりミスが多いです。

半年前に比べて、なんでファイルが読み込まれないんだ(URLのパスミス)やjQueryが動かないよ(記述間違いや読み込みタイミング)とかはなくなりましたが、単純なリンク先や画像、テキストのミスが改善されておらず、どうしたものかと。

 

あんなに念入りに何度もチェックしたのに、こんなに連続でミスするなんてなんかもう自分の頭おかしいんじゃないかぐらいに落ち込みますが(定期)、改善してかなきゃならんので対策を考えました。

 なぜミスが起きたのかを考える

 直近であったミスは、今まで偶然出会ったことのなかったマヌケだったため、こんなとこでミスするわけないと知らないうちに自分の作業を過信していたのかもしれません。

 

内容として

1) 画像の切り取りミス

2) 画像の更新ミス

3) 画像の判別ミス

4) 文中に半角スペース

5) リンク先URLのミス

6) 不必要なタグの消し忘れ

などがありました。

文字に起こすとどれも単純すぎて余計ダメージが加わりますね… 今やるミスではない…!

 

1) 画像の切り取りミス

カンプのデータを貰って、パーツ化して切り貼りするという作業行程。その際に選択されていない箇所があって中途半端に足らない画像になっていました。

イラレ作業時には以下を徹底するように心がけなおし。 

・どの選択ツールになっているのか気をつけて作業

・切り出したあとはグループ化する

・最後に文言と絵ひとつひとつ確認

 

 2) 画像の更新ミス

カンプのデータ更新があり修正をした際に、見落としがありました。カンプのどこが更新されているかなどは自分で確認しなくてはならないため、間違い探し状態。。それはそれで思うところもありますが、何につけても全体的な確認が不十分でした。

・作業時点では非表示にしている箇所や、前回確認済みで完璧と思っている箇所も念入りに一文字ずつ追ってみる

 

 3) 画像の判別ミス

画像はこのページにあるので、と言われるとそのページのここね!とページ内にある画像は1個しかないだろうと安易な思い込みで持ってきてしまったり…

実は同じものを撮った違う構図の写真だったり。罠か!とも思いましたがそれこそ「念入り」な確認ができていなかったんですね。。

・本当に同じ構図か確認

・このページで、と指定されているけれどカンプのデータから取ってもよかったのでは(その方が確実だったな)

 

 4) 文中に半角スペース

エディタ内に記述している時、文章の途中で改行(not <br>普通の改行)を入れると半角スペースでちゃうんですねーーー不必要な箇所に半角スペースが出現していました。

・エディタ内のテキスト記述は見づらくても改行なしに

 

 5) リンク先URLのミス

資料にあったURLがハイパーリンクになっていたため、とんだ先から貼り付けしたところ、資料にあったURLとリンク先のURLが一致していませんでした…

・資料にあるリンクを過信しない

・資料に記述してあるURLをコピーする

・リンク先と記述したURLが合っているか確認

 

 6) 不必要なタグの消し忘れ

リンクのいらない箇所にaタグが入っており、不必要にhoverした時の挙動がでているなど。

・いらなくなったタグは即削除する

 

ミスをなくすためにどうしたら良いのか

上記ミスの改善策をしたってそれしか防げないもんね…!まだ出会ってないマヌケミスと出会わないよう、全部に共通する改善方法って何かしらと考えてみました。

作成しているページで何が重要なのかを考える。

例えば、住所や電話番号、日時、タイトル、テキスト、画像…ページの中で何が重要なのかを考えて、ここは間違っちゃダメだろっていう箇所を把握して念入りにチェックをする。

 

資料は紙に出して確認

変更点や重要な箇所を赤ペンもって丸つけていきます。原始的だがここまでしないと安心できない…!(変更点だけチェックしてても漏らしあったのでこれはもう徹底)

 

テキストは声に出して確認

ウルセー!って思われるかもしれませんがミスするよりかよいです。口動かした方が脳みそにも入ってくるもんね…小声で確認。

 

エリア別に小分けして挙動から全確認

小分けした方がわかりやすい。何か動きのあるものの場合など、挙動も逐一確認!

 

 

ひとまず今はこれらを実践して、「次クソみたいなうっかりミスしたら死ぬ」と思って作業しています。口が悪くてすみません。ちなみに決心して以来まだ1回も死んでません。

工数削減のためにハイスピード意識していましたが、それのせいでミス誘発してたらたまったものじゃないので、今はひとまず確実な作業を優先です。同時に何個もできないのであります…

 

2年目に期待されること《1年目の反省と目標》

f:id:ayarpyyy:20161128211725j:plain

私と同じような境遇の人がいれば心強いなとか
そんな状況から這い出た先輩のアドバイスなんか載ってたら参考にしようかなと思い、世の中の他の2年目デザイナはどういう状態なのか調べてみました。

 

︎参考サイト

●IT系女子ログ
新人Webデザイナーの私が、1年目で指摘されたことを振り返る [デザイン編]

>読んだ瞬間ものすごく共感…一番のお気に入りに。
経験からの反省点と具体的な打開策、目標に対する結果が細かく書かれていてとっても参考になります。私もこの方法で振り返ってみようと思いました。

 

●ACTZERO:Creative Blog
入社して1年経った新米Webデザイナーが考えてみたこと 

ネクストページブログ
Webデザイナーの1年半を振り返る。

●iSM
僕のWEBデザイナー1年目の仕事内容など紹介

●D-Grip System -制作部
Webデザイナー1年目から2年目へ、デザインへの考え方の違い


 

私が指摘された内容など、調べてみたサイトに載っている内容とほぼ同じ箇所でした。みんな同じ道を通るのだとわかるだけでもなんだか安心して前に進める気がします。(安心しちゃいけないのだけれど)新人というレッテルが急に剥がれるプレッシャーとみんな戦っているのだ…

先人に倣って私も1年目の反省をばしていきたいと思います。
自分の現状と反省点を書いていくだけでも頭が整理される気がする。

1年目で指摘されたこと

この1年で指摘されたことは死ぬほどありますが、上記ブログで言われていることとほぼ同じですので個人的に重要視しているものを書きたいと思います。

デザインについて


フォントのカーニングは絶対

デザインカンプや画像を作成する時にフォントのカーニングを忘れ、全体のバランスがバラバラになり視点がブレてしまいました。

最初はそのバランスの悪さやブレにすら気づかず…整列していない気持ち悪さに気づくことがまず第一歩なのかも。

フォトショ使いの場合はオプティカル・メトリクス選択で丁度いいものを使用し、それでも文字間でバランスの悪い箇所は目視でポチポチと修正していきます。

 

視認性を考慮する

背景画像とテキストがかぶって読みづらくなっていないか、ボタンがボタンだとわかるようになっているか(埋もれていないか)、テキストなどの色が濃すぎないか、薄すぎないか…などなど。

全てがサイトカラー厳守という訳ではなく、ケースバイケースで同系色から持ってくるなど

 

一つの要素に対してさりげない効果を3つ以上使う

素人がフラットデザインに憧れてヘタにデザインするとダサくなる現象が起こった時、そんなつもりじゃないのだけれど要素をただ置いただけ(デザインしていない)に見える時などはこれをしてみる。

カドマルやシャドウなど、効果をさりげなく3つ以上入れることによって改善されるはずです。(効果入れすぎると逆にダサくなることもあるので要注意ですが…)

 

細部の調整を怠らない

フォントサイズや余白が統一されていなかったり、ボタンを押した時の挙動だったりなんだり。これを忘れると全体的にまとまらない、バラバラとしたイメージに。そういうディティールにこだわってこそ綺麗なデザインになるのだと思います…!

神は細部に宿るそうです。こまかみさま!

 

目で見て違和感のない位置が正解なこともある

フォトショやイラレで画像を作成する時に、配置ツールでセンタリングすると思います。ソフトは忠実に天地左右中央にセンタリングしてくれるのですが、それが「目で見た中央」とは違う時があるので要注意。

真ん中よりちょっと上、がちょうどいいことも。その場合は見た目で違和感ないことが最優先に。目視って重要です。

 

コーディングについて


うまくいかない時こそ冷静に

jsの挙動やバグがあった場合、すごく焦ります。焦ると頭が回らなく、いつも以上に時間がかかってしまい結局解決に至らずに先輩に迷惑をかけてしまうことに…。

私の場合は全角スペースが入っていたりパスミスだったり(クソおっちょこちょい)が多く、先輩に泣きついた結果それを指摘された時などは申し訳なさすぎて地中深く穴掘って埋まりたくなります。

 開発者ツールのコンソールでエラーがでていないか、CSSやHTMLのバリデーションチェックしたか、JSの記述位置を変えてみたりしたか、別のテストファイル作って動作確認したか…などなどチェックの仕方は山の様にあります。それを一つずつクリアーしていけば必ず答えにたどり着くはず!

 

CSS/SCSSはコメントをつけながらエリアごとにまとめて綺麗に書く

焦りのまま思うがままにCSSやSCSSを書いていくと、後々編集する時に同じエリアの記述があちこちにバラついたりなんだりでファイルの把握ができず余計な工数がかかってしまうことに。

エリアごとにコメントを入れて記述していき、わかりづらそうな箇所ではどういう記述をしているのかコメントをいれたりするとグッと作業がしやすくなります。

先輩にファイルを渡す時、多大なご迷惑をおかけしてしまったのを海より深く反省し、自分以外の人にファイルを見られる意識で恥ずかしく無いコーディングをするように意識するようになりました…

 

変数などルール決めしたものは必ず使う

SCSSにおいてだけのことではありませんが、変数やmixinなど、最初にこうすると決めたルールは必ず使い通すこと。

後々ファイル編集する時に、その変数の値だけ変えれば共通で変わるものが、変数を使ったり使わなかったりしているせいで一括で変えられなく、余計な手間がかかります。

私は余裕がない時などつい忘れてそのまま記述してしまいがちで、特に気をつける様にしています。

 

レスポンシブした時のことを考えながら要素を配置する

レスポンシブした時の配置がどうなるか、要素の置き方を考えながら構成していくとレスポンシブ時の調整が楽になります。というかそうしないとレスポンシブ調整している時につじつまが合わなくなり、急遽作り直し〜となって余計な工数が増えたり、余計な記述が増えてファイルが重くなってしまったりと後になって大惨事になりかねません。。要注意です。(PC表示調整で考えなしに作っていた結果、途中で これあかんやん!ってなって急遽作り直したことあります…)

 

PC表示時にある要素はスマホ表示でもそのまま使う

PC表示の時にあった要素で、スマホ表示の時は合わないし、さして影響ない箇所なので消してしまおうと判断してそれは少し乱暴と指摘されたことがあります。

合わないものも合う様にリデザインしてもいいし、もともとPCであった要素はなるべく消さずにそのままレスポンシブさせるようにとのことでした。

なるほど…固定概念に捉われてリデザインしてもよい、ということに気づかないでできないから消すという結果に至るのは確かに乱暴でした。いかんいかん。

 

PCブラウザで横幅を可変した時の表示とスマホ実機で見た時のデザインは必ずしも一致しなくてよい

レスポンシブ絡み続きですが。PCで表示した時と、スマホ表示時の要素の配置では、考えていても絶対に噛み合わない部分というのはでてきてしまうものです。

PC表示ではここにいなきゃ変だけど、このままレスポンシブさせるとスマホ表示ではここの位置になってしまう、でもそれだとスマホ動線上変だ!という問題です。

 その場合は無理に合わせようとせず、PCでブラウザ幅可変させた時とスマホ実機の時と分けて指定してしまえばよい!可変させた時の表示は、スマホで見るための指定なのだから。(その会社のルールによって違うかもしれませんが)

 

姿勢について


一度指摘されたことは繰り返さない

当たり前のことですが、注意散漫になっていてどうしても繰り返してしまいます。一度指摘されたことを把握しきれず、上司や先輩に度々指摘されることも。そのたびに反省するけどなおらないのは意識の改善だけじゃ意味無いってことです…

迷惑かけない!という意識は忘れず、案件ごとにチェックシートを作って最後に全部見直して改善を図っています。

 

納期は確実に守る。間に合わないと思った時はすぐに報告

納期内に収められず炎上…。

当たり前のことですが、どんな小さな納期でも、社内的納期でも厳守。リスケを繰り返すと感覚が麻痺してしまい、納期の危機感が薄れていました。

納期に間に合わないと思った時点ですぐに上司に報告する。そしてリスケを行うにしても2度。2度目は完全に終わることのできる期日を伝えること。これがデッドラインです。

最大の危機感を持って作業しなくてはと思います。

 

業務時間外を有効に使う

すべてを業務時間内で終わらせられればすごく良いのですが、そうもいかないので明日の作業を滞りなく進めるための準備を業務時間外にしておきます。

うまくいかない挙動の解決策や、実現させるための方法を検索かけておく、資料の把握をしておく、などなど。

 

言われたまま作るのではなく、自分で考えて提案していく

クライアントやディレクターに指示されたままに作っていくと、そうじゃなくてこうした方がいいんじゃないか、というものがでてくることも。言われたままに作っていると考える力が失われて、結果いいものができなくなるのだと思います。

私はよく、素直に聞くのはよいことだけど、視野を広げて固定概念に惑わされず提案してくれと言われます。こう指示されたからその通りやらなければいけない、ということはなく、それを覆すほどのロジックとよい案があればやっていかなきゃならんのですね。

 

自分しかいないと思う

わからなかったら先輩や上司に聞けるという安心感があったせいか、危機感が足りない状態に陥ってしまいました。これはいかん。

うまくいかない挙動がある時など、なにかにつけ「もし私しかいなかったら」と言い聞かせることで緊張感持って作業するようになってきたと思います。それで工数かかってしまうのはよくないことかもしれないけれど、本当にどうしてもダメな時はヒントをもらいにいきます。

もしかしたら成長する過程で一番大事なことかもしれないと思った「自分しかいない」状況。魔法の呪文のように心の中で唱えまくりたいと思います。

 

常に情報収集をしておく

まず情報の収集の仕方がわかりませんでした。していることといえば、情報まとめ系のサイト閲覧くらいでした。

なんでみんなあんなにピンポイントに良い情報ひっぱってこれるのかと先輩に聞いてみたところ、twitterでWeb界隈の人たちをフォローする、気になったサイトのRSS購読、はてぶなどでした。

あと、私の場合まとめサイトではプロには理解できるけど素人にはその前の段階なんです!ワカラン!っていうような記事が多かったので、初心者検索などしてみたりもしました。

常にアンテナ張ってなきゃいかんですね。

 

休む時間も必要

そんなこと言ったって休んでられない!と思いましたが最近わかるようになってきました。勉強する時と休みとを明確に分けるということかなーと。

ただでさえ要領も覚えも悪いのにーと思ってプレッシャーに押し負けながら勉強したって入ってきませんでした。この1年。

集中できていなかったんだと思います。集中できない状態で何時間も本やPCとにらめっこしても時間だけ無駄に過ぎていって、手放しに休める日を作っていないから変な疲労感がたまってしまって悪循環に陥ったり。

結果がでなければやっていないのと同じっていうのはわかっていても、何も努力していないとかやる気がないと思われるのはものすごく悲しい。やり方を変えなければいかんのですね。体と心と頭のお休み、必要です。

 


 

2年目の目標

  • 工数管理と自己平均の見積もりを正確にする
  • 情報収集
  • デザインの向上(サイト模写する)
  • ロゴデザインできるようになる
  • jQueryの難しい書き方や短縮記述の仕方覚える
  • jQueryだけでなくJSの書き方も少しは覚える
  • もっとWeb系の本を読む

 


 

こう並べていくとすべて当たり前のようなことですが、何個もあると簡単なことでもできなくなってしまったりってことあるんですね。

少しずつでも自分のキャパシティを広げていければと思います。

2年目、頑張るぞ!!

 

 

2年目Webデザイナの崖っぷち奮闘記

f:id:ayarpyyy:20161030154122j:plain

学校で勉強した訳でも実務経験がある訳でもなく、

趣味の粋最低限の独学でWebデザイン職にたどり着いたアラサー女です。

 

デザイナとして1年終えた今、全然成長していなくて正に崖っぷち状態。

本気出して突っ走ってきたつもりでいたけど全然足りてない…

もともと要領の悪い方ではあるがそれでも自分なりに最速で仕上げてきたつもり。

でも「つもり」じゃだめなのだ。成果を出さないと評価されない!

どれだけやっても成果がでないならそれは努力じゃない!

やったつもりになっているだけで何か間違っているんじゃないか。

 

そんなわけで

もっと本気だせ自分!!という事で

決意戒め、備忘録と頭の整理その他もろもろの為に

Webデザインに関するあれこれ日記を始めようかと思います。

もの書き能力を身につける為にもよいかもしれない。

 

しかし誰が読んでる訳でもないブログを誰かに充てて書いてる羞恥心がすごい。

どうぞよろしくお願いします。