■モバイル優先になる今、デザインはどう考える?

Googleは先日、モバイルファーストインデックスの導入を正式にアナウンスしました。
モバイルからの流入がますます多くなってきた昨今では自然な流れと言っていいでしょう。検索エンジンはもちろん、モバイルユーザーに対して適切な情報を提供することが求められています。

1.モバイルユーザーとPCユーザーの比率を把握していますか?

2.デザインを行うとき、PCとモバイルどちらから考えていますか?またモバイルファーストインデックスが導入されたらデザインの進め方は変わると思いますか?

3.モバイルユーザーに対してデザイン上で工夫している点があれば教えてください。

■作業に欠かせないアプリ。何をどう使ってる?

デザイン制作のPhotoshop、Illustratorに限らず、コーディングのためのDreamweaverやcoda2、ファイルをアップロードするためのFFFTPやFileZillaなどのFTPのアプリや、ECサイトの顧客情報や商品管理のCSV登録のためのExcelなどなど、”Web担”の皆さんはさまざななアプリ(ソフト)を使用して業務を行っていると思います。そこで質問です。

(1)日頃行っている作業とそのためのアプリの組み合わせとその理由を教えてください。

(2)アプリを使う上で工夫している点を教えてください。また、不満や改善したい点があればそれもお書きください。

(3)興味関心のあるアプリがあれば教えてください。(任意)

■より効率的に素早く画像を書き出す方法

WebデザインをPhotoshopやIllustrator、Fireworksなどでまず制作をする方は多いと思います。
Photoshopで作成したWebデザインは1枚の画像ファイルとなり、そのままの状態ではWebページには使えません。画像として利用する領域をバラバラに書き出す作業が必要になります。

そこで問題です。

1. バナーやWeb用の画像の書き出し(jpegやpng,gifなど)を行う際に、注意していることはありますか?
2. どのようなツールのどの機能を使って画像書き出しを行っていますか?

■スマートオブジェクトで直しを素早く

2015年5月(Vol.41)号「Photoshop の「やり直し」をどう考えますか?」の課題で少し触れましたが、今回は直しに強いスマートオブジェクトの機能について取り上げます。

1.Photoshopのスマートオブジェクト機能は知ってますか?
2.1.で知っている、と答えた方は、便利だなと思う機能を教えてください。

■Photoshopの「やり直し」をどう考えますか?

デジタルの作業は、アナログと違ってやり直しが効いて便利なことはご存知のとおりですが、例えばPhotoshopでctrl+zで戻れるのは1度きりで、ヒストリーパネルを知らない初心者さんは、最初不便だなぁと感じるものです。
一方で、中級者以上の方にとっては、作業レイヤーを残しすぎると重くなってしまうけれど、いつか使うときがきそうで悩む…などの悩みがあると思います。
「やり直し」が発生した時にスムーズに対応したい、という想いは、初心者～上級者問わず、みなさん共通の悩みだと思います。

1.「やり直し」を前提に、あるいは比重をおいていますか?
2.「やり直し」になった時の失敗談があれば教えて下さい。
3.「やり直し」を前提とした工夫があれば教えて下さい。
(Photoshop外での工夫でも結構です。)

■写真の補正(レタッチ)方法

写真を撮影した後は「補正(レタッチ)」の作業がつきものです。人物写真の修正、風景写真のゴミ取りなどなど。Photoshopでは写真の補正のために、様々なツールが用意されていますが、ツールよりも、補正をする人の“観察眼”が、実は一番大事です。

1.あなたが人物の写真データを前にした時、修正するとしたらどんな所に気を使いますか?
2.あなたが家の外観(不動産屋さんの写真などをお考えください)写真データを前にした時、修正するとしたらどんな所に気を使いますか?
3.既にphotoshopでの補正のご経験がある方は、特に補正に使っているツールと、その理由をお答えください。

■画像の「切り抜き」方法

今回はweb制作には欠かせない「画像」の扱いについての課題です。
自社サイトのちょっとしたバナーや簡単なランディングページなどをご自分で制作されている方や、web制作の勉強している方を対象にしています。

写真やイラストの素材をバナーなどに落とし込む際には大きく分けて「角版(かくはん)・丸版(まるはん)」と「切り抜き版」の選択肢があります。
「切り抜き版」は背景を切り抜いて対象物だけをしっかり見せることができるので、これが活用できるとデザインの幅がぐっと広がります。

Adobe社のPhotoshopはいろいろな方法で「切り抜き」ができます。
対象物の種類や背景との兼ね合い、色調や解像度などによって方法は様々です。
絶対的な正解はありませんが、セオリーだったり、コツは存在します。
そこで今回は、「切り抜き」についての課題です。

(1)あなたが「切り抜く」ときに使っているアプリケーション・バージョンと、そのアプリケーションを使っている理由を教えてください。
(2)そのツールを使って「切り抜く」やり方を1つ教えてください。
(3)(2)はどんな画像を「切り抜く」時に使用しますか?被写体や写真の情報を簡単に教えてください。
(4)(3)の画像を切り抜くときに(2)を使うのはなぜですか?

※画像の種類によって方法は色々ですので、(2)～(4)を複数回答くださってもかまいません。

■素早くカッコ良いバナーの作り方
はじめまして。浅野ともうします。よろしくおねがいします。
今回は、ウェブ担として効率的なバナーの作り方について考えます。

1.　自分で作ったデザインや自社のデザイン(たとえばバナー)で今ひとつ垢抜けなくて悩んでいるもの、もしくは別サイトで「これは真似したい!」と思うものを1つ提出してください(URLをお願いします)

2.そのデザインでは、誰に、何を伝えて、どんな印象をもってもらうべきだと思いますか?

3.1のデザインで、2がうまく伝わらない(もしくは伝わる)のはなぜだと思いますか?

実際に制作されている方はソフト名、バージョン、OSもあわせて教えてください。よろしくお願いします。