Webデザイン備忘録

4年目Webデザイナーのデザインメモ

WEBデザイナー3年目の反省と4年目の目標が難しいお話

f:id:ayarpyyy:20181007220937j:plain

へへ!へへへへ!
記事書くのってなんて気力がいるんだ!ついに年1!
世の会社勤めをしつつブログ書いてる技術者の方はゴイゴイスー…

4年目も無事にWEBデザイナーとして生存しております。
社内の人員の変動や割と大きめの案件が立て続けにあったことで嵐のように駆け抜けた感!

3年目に目標としていたことはなんぞやと見返したところ目標が何一つ変わっておらず

ayarpyyy.hatenablog.com

この1年私は何やってたんかなと思い返すと
コーディングに重きを置いていなかったので変わっておらんのだなと感じた次第です。

この1年で学んだこと

ディレクションのしかた
・仕様の考えかた

大まかに出すとこんな感じでした。

今までも細々とした保守でクライアントと直接やり取りすることはありましたが、新案件でフロントに立つことがなく、私の出したデザインをもとに仕様を考えてもらいそれを実装していくというフローが多かったと思います。

うちの会社(弊社っていうとなんかかたくるしいので)は分業していないので社内にデザイナーとシステムエンジニアがおり、都度相談して仕様を練って実装していくスタイルなのですが、ようやくそこに混じって行けるようになったなという感じです。


3年目の目標は叶えられていませんが、仕様を考えられるようになったので別ベクトルでちょっと成長が実感できました。
システムありきなデザインというか、無理なデザインをしない、ここはこういうシステムでこうやって情報が吐き出されるからこのデザインで…と繋がりを考えられるようになりました。

ここの情報は持ってくるのが難しいのではないかーという箇所も検討つくようになり、システムさんに相談することもできたりなんだり

こうしてフリーになっても困らない基盤ができていくのかなって、ちょっと思いました。
仕様が考えられるようになると、デザイナーだけでワープレ使ってサイト作らなきゃいけない時や、もしも分業することになった時にもシステムや実装に無理のないデザインができるのでスムーズに仕事できるだろうし…


デザイナーは3年目から安定期に入ると師匠が言っていたので、ゆるやかな死をしないようにいろんな技術を高めていけたらなとと思います。

note.mu


後輩ちゃんもできたしね。追い越される恐怖で精神病みそう!ヒヒッ!
ジョジョ5部も始まったことだしテンション上げていかねば

WEBデザイナ2年目の反省と3年目の目標

f:id:ayarpyyy:20180128184051j:plain

順調にブログ更新怠ってます!へへ!
あっという間に2年目も過ぎて3年目突入し、ボヤボヤと過ごしていく事の抑制に反省と目標をば書いておこうと思ったんす。

昨年の今頃の絶望感はそれなりに軽減されていますが、やっぱりまだ失敗も絶望も多く、全然自信はついてないのです。 

デザインについて

昨年指摘されて気をつけていた事
  • フォントのカーニング
  • 視認性を考慮する
  • 一つの要素に対してさりげない効果を3つ以上使う
  • 細部の調整を怠らない
  • 目で見て違和感のない位置が正解なこともある

それなりに体に染み付き、自然とデザインカンプを作る際に行えていたかと思います。その成果か、自分でイマチイ実感はないのですが、しばしば絵を作るのが上手だと褒めていただけるようにもなりました…

デザイン:2年目で指摘されたこと



カンプ作成のスピード向上

最初のたたきカンプを作成し、ブラッシュアップさせるまでの工数がかかりすぎていました。
参考サイトの選出が定まらなかったり、ハッとするような(違和感のない奇抜感というか、新鮮に感じるような)デザインにこだわるが故に思い悩んでしまったり、主張すべきものやまとめるべきコンテンツの精査が遅く、時間がかかってしまっているのかと思います。

3年目はここらへんの勘を養って工数削減していきたいと思います。

 

クライアントの希望や意図を汲み取る

デザインを作成する際いただくコンセプトや指定は抽象的なものが多かったりするので、クライアントから聞き出した情報からよく考えて考えてアタリをつけていけるようにしたいと思います。

ウーンと思う箇所や、なんとも言えない注文にも意地をはらず、どこまでルール内で自分なりにかっこよくしたものを提出できるかがミソなのですね…

 

UIの基礎を学ぶ

メニューやモーダルウィンドウを開閉する時のボタンの位置や、何か操作した時のデザインが弱いと指摘を受けました。
自分なりにロジックを持って配置してはいたのですが、デザインの動線重視で配置していたため、操作感としてはおかしな位置にしてしまっていたりしていたのかなと思っています。
ここら辺は解釈の思い違いなどもありそうなため、勉強していきたいと思います。

 

コーディングについて

昨年指摘されて気をつけていた事
  • うまくいかない時こそ冷静に
  • CSS/SCSSはコメントをつけながらエリアごとにまとめて綺麗に書く
  • 変数などルール決めしたものは必ず使う
  • レスポンシブした時のことを考えながら要素を配置する
  • PC表示時にある要素はスマホ表示でもそのまま使う。
  • PCブラウザで横幅を可変した時の表示とスマホ実機で見た時のデザインは必ずしも一致しなくてよい

冷静になれているかは怪しいですが、こちらもそれなりに体に染み付き、コーディングを行えていたかと思います。レスポンシブで悩んでも折り合いをつける箇所など経験で解決することができるようになってきました。


コーディング:2年目で指摘されたこと



metaタグまわりの確認を忘れない

OGPまわりの設定や、クロールされないようなnoindex記述の取り忘れがあり、冷や汗を書く事がありました。特にクロールまわりについては2度も失敗してしまったため、3度目はあってはならない。。死ぬ思いでリリース前後のチェックシートを作成しようと思います。

 

デザイン側でがんばりすぎない

jQueryである程度デザイナで完結できることもあるけれど、挙動も遅くなったりするので大人しくシステムエンジニアさんにお願いした方がよいこともあるという事。

その案件の規模や料金によって実装の仕方を考えるという感じですね

 

姿勢について

昨年指摘されて気をつけていた事
  • ①一度指摘されたことは繰り返さない
  • ②納期は確実に守る。間に合わないと思った時はすぐに報告
  • ③業務時間外を有効に使う
  • ④言われたまま作るのではなく、自分で考えて提案していく
  • ⑤自分しかいないと思う
  • ⑥常に情報収集をしておく
  • ⑦休む時間も必要

①は、1年目よりかはマシになっていたかと思いますが、繰り返し指摘いただくことがあり、猛反省…

②は、社内納期のフィードバック分の時間を十分に確保できていない事があったため、自己管理能力をアップさせたいと思います。

そして、⑦は結構重要だなと思いました。仕事のことは業務内で納める、休みの日は思い切り休む…!休まないと疲れて思考力が落ちちゃうんすなあ

姿勢について:2年目で指摘されたこと


常にアンテナを貼っておく

情報収集が足りていない…どうしても自分の興味がある記事に偏って読みがちなので反省です。あと、常に新しいデザインを見るように。ついついカンプを作る時などにざざっと調べがちなので、こういうイメージといえばここ、みたいなアタリをつけられる程度に見ておく。

 

説明が下手

説明する時に、いらない情報といる情報の区別がつかず、端的に話そうとしてはしょりすぎたり、焦って説明する順序がメタメタになってしまったり…

机の前に説明の仕方のメモを貼って、説明する前に確認…するけど焦りに勝てず!

効果があるかはわからないのですが、今は時間はかかってしまうけれど何を伝えたいのかをメモに書き出して、どういう順序で話せばよいかシミュレーションしてから話すようにしています。

 

立ち回りが下手

確認など、まわりを巻き込んでいく、ちゃんと自衛しながら進めていくのが重要とアドバイスいただたいのですが、なかなか頭がまわらなくてできなかったりしています。

誰々に確認済み、など自分以外にも確認してもらう人を増やすと、ミスや不具合の検知ができるし説得力が増すので効果的なのだそうです。確かに…私が確認した、となると説得力ないけれど誰々も確認している、となるとじゃあ大丈夫かーとなったりもする。(情けない話ですが)

 



 

2年目の反省と3年目の目標

2年目に目標としていたこと↓
  • 工数管理と自己平均の見積もりを正確にする
    →最初はグラフ管理していたのですが、慌ただしくなるにつれしなくなってしまいました。。しかし、いつのまにか社内平均的な工数を出すようになれていて、見積もりを出す時は師匠の確認なしでもOKな範囲になっていたので成功しているのかと思います。

  • 情報収集
    →これは引き続き…というか永遠ですね…中身のクオリティをアップする。

  • デザインの向上(サイト模写する)
    →何点かしか模写することができなかったのですが、模写することで細かいディティールなど見ただけではインプットできていなかったものを取り込むことができたかと思います。

  • ロゴデザインできるようになる
    →ロゴってどうやってつくるのか、というところから、パターンを把握するとちょっととっつきやすくなりました。ロゴ作成の仕事もすることができ、クリアできたかと思います。

  • jQueryの難しい書き方や短縮記述の仕方覚える
    →複雑な書き方や効率の良い書き方は未だに習得できていませんが、モーダルウィンドウやアコーディオンメニュー、レスポンシブした時のグロナビなんかは自作でササッと書けるようになりました。

  • jQueryだけでなくJSの書き方も少しは覚える
    →これはぜんぜん…手付かずでした。

  • もっとWeb系の本を読む
    →web系というか、デザイン本を定期的に購入していました。これも引き続き。


上で書いた以外の、3年目の目標は引き続きこんな感じですかね…

  • jQueryの難しい書き方や短縮記述の仕方覚える
  • JSの書き方を少しは覚える
  • phpの基礎も理解したい
  • UIデザインの勉強

3年目ももう数ヶ月すぎてしまいましたが、引き続きがんばるぞ…!

環境もちょっとずつ変わってきているのでしっかりせねばな3年目。 

 

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

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

アイキャッチ画像とか…なくてもいいんだい…(いつも無駄に時間かけて探してしまう)

 とか言いつつも今日はモリモリガリガリです。 

 

デザインを提案する際に、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回も死んでません。

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