60L.design へのメールフォームです。 ご質問、お問合せ、お見積り等、お気軽にお送りください。
データの送信は firestorage 等の転送サービスをご利用ください。

お名前 ※必須項目 お名前を入力してください
会社様名
お返事先メールアドレス ※必須項目 お名前を入力してください
お問合せ種別

お問合せ内容 ※必須項目 お問合せ内容を入力してください
次の2つの数字を足して入力してください。 ※必須項目 半角数字を入力してください。

+

=

閉じる
お気軽にお見積り、
お問合せ下さい
webデザイナーさんにお願いしたい素材作り

ちょっと忙しい間に、あっという間に4ヶ月過ぎてしまいました…。この間、webコーディングのお仕事をさせて頂いていて、非常に多忙な毎日でした。本当に家に帰って寝るだけ。

しかしそれも、webアプリの制作という、プログラマーやシステムエンジニアの領域のお仕事もさせて頂いたからで、webコーディング自体はそれほど大変ではなく、コーディングよりやはりプロジェクトの進め方というところでスキルが必要なのだなと実感しています。その部分ではこれまでの仕事が糧になっていて、実際お仕事では頼って頂いているありがたい状態です。

しかし、webコーディングと言ってもただある素材をweb用に表示させるだけではないという、細かく面倒な部分があります。
それは『webデザイナーさんにお願いしたい事』なのですが…。
と言う訳で、簡単に『webデザイナーさんにお願いしたい素材作り』を挙げてみたいと思います。

1:素材作成は原寸で!!

まずはwebデザインを1ページの画像として作成する事が多いと思いますが、出来れば原寸で作って欲しい所です。
Illustrator上で思いつくままに作るのはまずはいいのですが、例えば『幅960pxのwebデザイン』なら、最終的には幅を960pxに縮小して貰わないと、こちらでは素材を全てリサイズせねばならず、中には画像リサイズの影響があるデータ等もあります…。
酷い所だと、1枚の画像を『素材です』といってパスしてくる所もあるので怖い所。

2:素材は出来れば偶数サイズで!

例えばページの真ん中に1枚、中央揃えしたい画像があるとすると、その画像は偶数でないと1pxずれてしまいます。
たかが1px…と思われても、実際はアイコンの羅列など、小さいサイズでの領域では1pxのズレは視認できてしまいます。
出来れば12の倍数とかがいいのでしょうが、最低でも偶数で作ってください。じゃないとコーディング側で偶数サイズで作り直す事になるのです。

3:ドロップシャドウは要注意。

ボタンが羅列する箇所で、それぞれにドロップシャドウがかかっていると…。
まず、隣同士のシャドウが影響していると、ボタンの並べ替えに影響が出ます。シャドウが切れているボタンができてしまうなど。
そこは『絶対ボタンの増減はない!』というルールならいいですが、更新や追加削除があるのがwebの前提なので、素材同士影響があるデザインは考えものです。
また、ドロップシャドウが他の素材に影響しないとしても、画像をどのサイズでスライスするか、目分量では厳しい所もあります。しっかりサイズをボックスに収めて作ってくれるなら…しかし現実にはそういう配慮されたデータはなかなか作れないのが実情です(デザインでの手間の意味でも)
ドロップシャドウでもう1つ。大きい写真画像にドロップシャドウを付け、しかも背景を透過させるとなると、png形式での出力になるのですが、サイズが跳ね上がる可能性があります。CSSでボックスを組んで回避できなくもないですがわざわざそこまでする事も大変なので、あまりにも大きい画像へのドロップシャドウは別パーツで組み合わせる事ができるように考えるとエンドユーザーにとってもいいでしょう。

4:素材ごとはグループ化する。

ボタン1つを動かしたい時、ボタンのベース画像、シャドウ、テキストなどがグループ化されておらずバラバラ…。
これは普段、オブジェクトの管理を意識していないと慣れないようで、グループ化がきれいに出来ている人をなかなか見ません。Illustrator等では特に重要だと思うのですが…、
しかも作業の時にボタンの背景だけロックしてそのまま…とかも多々あります。ロックを外すのは面倒なので、自分でグループ化をする事を習慣づけてもらえるとロックもなくなり助かります。

5:背景は透明で。

webデザインの際、まずは白背景で…とかあると思いますが、PhotoshopやFireWorksなどでカンバスを白にしてしまうと、素材スライスの時に大変です。
透明背景で、必要な部分だけ白の矩形を下地に引いてあげる、としないと、変なところが透過していたり、透過させたいけど背景が白なので透明にして…と、これまた手間です。
またwebデザインとしても、どこがボックスになっていると意識してwebデザインできると思います。

…他にもいろいろありますが、素材受け渡しの上でのちょっとしたもやもやでした。
webデザイナーという方でも、実際はwebコーディングは知らないというただ絵作りするだけの方が結構いらっしゃるんだな〜という事を最近知って、いろいろフォローする側になっています。
逆に言うと、webコーディングが出来るだけではダメで、webデザイナーの詰めの所をするくらいが当たり前なのかなとも思っています。

Photoshop、Illustratorなどのスキルはもちろん、html、css、php、JavaScriptなども習得していないといけない作業です。
つまり、コーディングの実務が出来たら、webデザイナーの仕事を喰ってしまえるし、現に喰っちゃっています。
絵作りしか出来ないwebデザイナーの方は、今後危機感を持たないといけないのでは?と思う昨今でした。

もちろん世の中にはたくさんの広く深いスキルと知識をお持ちのwebデザイナーの方がいるので、その方々を目指して私も勉強しています。
webデザイナーを目指す方は、プログラム習得もある程度必須だと思います。

…私もいい加減ブログデザインを刷新したいです…。

 

 

『ふうらい姉妹1巻』読んでいて主人公の生活が非常に不安になる、超シュール系4コマ。

『LIAR GAME 18』最終戦、四国志ゲーム開始!19巻は4月中に発売なので完結直前です!

『野崎まど劇場』なんて酷いラノベだ…と、爆笑しました。フリーダムな短編集。将棋のアレも…。

『iPhoneアプリ開発の教科書』カラーでイラスト多くて、まずはこれを読んでみようと購入しました。

『数論の世界』高校レベルの知識での面白い数論の話。高校の時にこの本を知っていたら…。

『ミーティアわんわん』古賀亮一先生の電撃新連載!もったいないので少しずつ読んでます。

『新ゲノム5』相変わらずの古賀亮一マンガです。とにかくギャグの密度が高い…!

『HTML5&CSS3ポケットリファレンス』技術評論社のPRシリーズは鉄板です。

『容疑者Xの献身』今更ながら、こんなに面白い邦画に出会えるとは…!悪い予想を上回る結末。

『ゆるめいつ』シュール系脱力4コマ!この作品に触発されて4コマを描き始めました。