デザイン関連の記事一覧




●印刷にもWebにもそれぞれのルール

私はメインの業務が印刷データの処理を行うDTPオペレーションからWeb制作になってから、日が長いですが(とはいえ、つい先日も出力トラブルのあるデータの解析などをやっていましたが)印刷系のルールと、Web系のルールって、似ているようでかなり違うことを実感しています。


ここでよく勘違いされて困ることが、印刷系とWeb系でデザイン・制作をする際に、同じアプリを使用するということです。

IllustratorとPhotoshop、これは印刷でもWebでも必ず使うアプリです。

だから、印刷でIllustrator・Photoshopを使っていると、Webデザイナーになるのも簡単なのでは?と思ってしまいがちです。

そこが落とし穴!


印刷は印刷なりのルールがありますよね。


  • 裁ち落としを付ける
  • 画像の解像度は350dpiで
  • カラーはCMYKで
  • フォントはアウトライン化で
  • リンク画像はユニークなファイル名に

  • 他にもたくさんあります。こうしたルールが分かっていないと、「うわっ、データは来たけど結局手直しが必要…」とか「どこをどう直せばここが直るんだ?」とか「思ったカラーにならないけどどうするの?」とか、最終的にできあがる成果物(=印刷物)の品質に悪い影響が出たり、作業効率が悪くて後工程の人が納期や作業の面で辛い思いをしたりします。

    だからルールを学んで、品質を向上させ、作業がスムーズに流れるようにするのです。


    WebにもWebなりのルールがあります。

    そんなルールを現場のプロから学べる書籍が『プロにまなぶ現場の制作ルール84』(北村崇・浅野桜著、エムディエヌコーポレーション発行)です。

    20160416-プロにまなぶ現場の制作ルール84-01

    黄色い目立つ帯にはこう書かれています。

    PhotoshopやIllustratorでのデータの正しい作り方、納品するときの指示方法など、Webデザイナーとして“やるべきこと”と“やってはいけないこと”をまとめた、Webデザインの新しいルールブック。

    ルールを知ることで、Webデザイナーがどのような仕事と品質を求められているのかが分かる本です。

    記事の続きを読む




    Illustratorの線幅ツールを除いて(先に書いておく)。



    ●新しいGoogleのロゴは線だけで表現ができる…? すごい!

    というわけでGIZMODOにこんな記述がありました。

    他のユーザーさんの指摘では、新ロゴはフィル(fill、塗り)ではなくストローク(stroke、線)でも作ることができるそうです。これも旧ロゴではありえなかった特徴の1つ。

    グーグルの旧ロゴは14,000バイトもあったのに、新ロゴはたった305バイトなのはどうして?(ギズモード・ジャパン)

    そうなのか?と新しいGoogleのロゴを改めて見てみました。

    20150907-Googleの新しいロゴは線だけで表現できない-01

    画像出典:Evolving the Google Identity(Google Design)



    しかし、どうも線(ストローク)だけでは難しそうに感じました。

    上記画像のあるGoogleのページには、こんな説明もあるので、見てみると、確かに線(ストローク)だけでGoogleの新しいロゴは描けそうです。

    20150907-Googleの新しいロゴは線だけで表現できない-02

    画像出典:Evolving the Google Identity(Google Design)

    記事の続きを読む



    何度見ても「いやーこれはやられちゃったな〜」と思ったスマートフォン用のページデザインに出会ってしまったので紹介します。

    今回紹介するのは「病院・薬局様のウェブサイト」のモバイルページです。

    見たら一目瞭然なのでスマートフォンで表示しているイメージを。

    それがこちら。

    20150331-スマートフォン向け病院ページの決定版-01


    ちょっと分かりづらいですかね…?

    普通にスクリーンショットを撮ったものが以下の画像です。

    20150331-スマートフォン向け病院ページの決定版-03

    First View(=ページを開いて最初に見える部分のこと)はシンプルに青緑系のベタの背景色に、白の文字とロゴのみ。

    超シンプルです!

    こんなのでいいのか!?


    記事の続きを読む



    20141128-コーヒーと火災報知器-03

    DTPの勉強会で11月15日に東京に行ってきました。今回はテーマがInDesignということで、入り口の張り紙のカラーは紫色。


    DTPの勉強会第15回の会場は浅草橋駅の前の「ヒューリック ホール & カンファレンスRoom1」というところ。

    ウェブサイトはHG丸ゴシックM-PRO感ありますが、Wi-Fiサービスや温かいおしぼりの無料サービスという驚きのサービスもあり、なかなか良いホールでした(会場の参加者側の電源がほとんどない以外は)。

    20141128-コーヒーと火災報知器-01

    画像出典:【秋葉原・浅草橋】ヒューリック ホール & カンファレンス│貸し会議室/イベントホール



    ●コンビニのコーヒーは画一的?

    この会場は1階にコンビニのスリーエフがあるのですが、ここでのコーヒーサービスに驚きました。

    お金を払うと、紙のカップを渡されるところまでは普通のコンビニと一緒です。

    しかし、スリーエフではなんと6種類のコーヒーから選べるのです。セブンイレブンみたいに1種類ではないのです(サークルKサンクスは結構あるけど)。

    ちょっと店内の写真はないのですが、6種類のコーヒーは、コーヒーウォーマーの上にデカンタに入っています。こういうのね。


    Kalita デカンタ 1.8L ブラック
    by カエレバ
    記事の続きを読む



    20160101-SmartNews-アイコン-02

    みなさん、ニュース閲覧アプリのSmartNews(スマートニュース)を使っていますか? 私は頻繁に使っています!


    さて、TwitterでSmartNewsのアイコンの変遷がおもしろいというものが流れてきました。


    確かにおもしろいので、時系列順に見てみましょう。


    ●SmartNews以前

    まずはSmartNewsになる前(笑)。「NEWSどうぞ」というアプリ名(の予定)だったのですね。

    アイコンデザインを見てみると、カラーで分けられたNEWSのイメージが表現されているのだと思いますが、文字の置き方が適当過ぎる。せめて「どうぞ」はそれぞれのカラーのセンターに来るように置こうよ。「ぞ」だけ左に寄っているように見えてしまいます。

    20141022-SmartNewsアイコンの変化・変遷-01

    画像出典:SmartNewsのUI/UXエンジニアが語る!「iPhoneの画面サイズと室町時代の違い棚」 (Find Job ! Startup)



    ●SmartNewsリリース直前

    そんなイケてないアイコンを作り直したのが、dot-ai, Vol.1「超絶アピアランス祭り」で講師だった、あの「鈴木 ともひろ」さんです。

    アイコンデザインはニュースペーパー(新聞)らしいデザインに、仕分けされたカラーの付箋のようなものが付いていて、ニュースをただ流すのではなく、編集している(ピックアップしている)ということが表現されているのだと思います。

    20141022-SmartNewsアイコンの変化・変遷-02

    画像出典:SmartNewsのUI/UXエンジニアが語る!「iPhoneの画面サイズと室町時代の違い棚」 (Find Job ! Startup)


    なお、SmartNewsの初期のアイコンの納期はなんと3日!(汗) 超短納期ですね…。(2014/10/22追記)

    その当時、「SmartNews」のアプリ開発は難航していました。アプリの申請をする1ヶ月前に、ようやくユーザーテストに漕ぎつけたのですが、期待した結果に至らず、急遽メインアイコンや名前を変更することになりました。

    時間がない中で思いついたのが、ランサーズに依頼することでした。その時は、依頼期間わずか3日だったのですが、魅力的な提案が次々と集まりました。

    あと1ヶ月しかない!?クラウドソーシングでピンチを脱した「SmartNews」リリース秘話 | Lancersマガジン
    記事の続きを読む



    NHKニュースのページははてなブックマークやTwitterでたまに紹介されるので、見ることが多いですが、今日スマートフォンで見ていたらおもしろい機能が付いていたのに気がついたので紹介します。


    機能としては、文字のサイズを変更することで、通常のウェブページのデザインと、スマートフォン用のデザインが変わるレスポンシブwebデザインになっていたということ。文字サイズを変更するだけでデザインが変わるので、PC版とスマートフォン版の切り替えが簡単でナイスだと思います。

    もしかしてこれって結構前からあったのかな?


    ●PCのブラウザーでNHKニュースを開く

    まずPCでNHKニュースのページを開くとこんな感じです。

    このページにも右上に文字サイズを変更するボタンがありますが、これをクリックしてもニュース本文部分の文字の大きさが変わるだけで、特に大きなデザイン変更はありません。

    20140323-NHK-レスポンシブwebデザイン-01

    以下全ての画像出典:中国 大気汚染企業に懲罰税導入へ(NHKニュース)



    記事の続きを読む



    All Aboutのページを見ていて、ナビゲーションのリンクを間違ってクリックしてしまったので、紹介する。

    見ていたページは「PGPで暗号化メールを送るには」(All About)と言うページだ。

    20140322-All-About-ナビゲーション-01

    ページの後半にクリックを間違ってしまったナビゲーションがある。


    記事の続きを読む



    20131003-タブの様な形の上辺のみ角丸四角形-00


    上辺が角丸になっているタブ状の四角形をIllustratorで作ります。
    こんな形のものです。
    20131003-タブの様な形の上辺のみ角丸四角形-01


    Fireworksでは、これはすぐにできます。
    自動シェイプの角丸四角形を使って、下辺の角丸の大きさを「0」にするだけです。
    20131003-タブの様な形の上辺のみ角丸四角形-02

    超簡単でしたね!


    でも…残念ながら、FireworksはCS6で開発が終了。
    Adobe Creative Cloudを使うユーザーは、Fireworksではなく、Illustratorでこうしたオブジェクトを制作しなくてはいけません。(Photoshop CCではできるがな…)


    ということで、DTPでIllustratorを使っている人も、ウェブ制作でIllustratorを使わざるを得ない人も、上辺が角丸の四角形(以下タブ型角丸四角形)を作る方法は何かに役立つはず。
    記事の続きを読む



    ひらめいた!のイメージは電球がよく使われますが、最近はフィラメントの電球なんてわからない人も多くなってきたのではないでしょうか。


    本日(2013年5月8日)の日経産業新聞20面のクラボウさんの広告

    出典:本日(2013年5月8日)の日経産業新聞20面のクラボウさんの広告より。


    なるほど、最近はLED電球ですね。


    先日「セル画の意味がわからない人たちも多くなってきたのでは」ということがTwitterで見かけましたが、同じ感じなのかも。(今時だもフレームなのかな?)

    「チャンネル回す」もそうですね。

    でも、「誤植」みたいに残るものもあるからなにが残るのかはわからないですけど。
    記事の続きを読む



    20130317-Adobe-Creative-Cloud-ライセンス改定-00
    出典:アドビ クリエイティブ クラウド | Adobe Creative Cloud

    なんだかMac使いの人には良いのかもしれない。




    今後のAdobe Creative Cloudのソフトのライセンスは、例えば2つのOS(マシン)にインストールして同時起動OKだそうな。(同一ユーザーね)


    つまり、Macの仮想マシン上でWindowsを動作させて、そのWindows内でIllustratorを起動し、MacでもIllustratorを起動してもOKということだ。
    え? そんなことする状況はは開発の現場くらいしか無い?


    んー…だったら、Mac2台にInDesignをインストールしておいて、2つのマシンでPDF書き出しをするとか。まぁ、これなら実際のDTPの現場ではありそう。(フォントの環境を揃えるとか他の問題もあるけどね)


    記事の続きを読む



    ブログ著者

    名前:(Google+のプロフィール)

    ケータイ好き。ガジェットが好きでiPhoneやらAndroidなどを所有。Surface Pro 2も持っている。

    お仕事は印刷会社で営業・広報活動・DTPオペなどをしています。要は何でも屋さんです。最近は印刷関連より、自社のウェブサイトを制作するお仕事がほとんど。使用しているCMSはMovable Type。

    ブログ著者について

    サイト内検索