1. DX支援サービス

    進化したデジタル技術を浸透させることで人々の生活をより良いものへと変革する

  2. ソフトウェア開発サービス

    VAREALだからできる、RubyとRuby on Railsに特化した、素早く柔軟なソフトウェア開発

  3. AI関連サービス

    データ活用と機械学習を用いたビジネスの着実な深化を。

  4. クリエイティブサービス事業

    美しいだけではない
    機能的UI/UXと正しいコーディング。

  5. 自社製品のご紹介

    自社製品のご紹介

  1. イベントサイト 「オンラインで集まろう 学研クリスマス&おとしだまウィーク」

  2. 株式会社ミクシィ様 チケット販売サイトの開発支援

  3. 株式会社ドワンゴ様 e-learningシステム「N予備校」

  4. スカイライト コンサルティング様コーポレイトサイトリニューアル

  5. ハイブリィド株式会社 様 [ IT-Manager SD ]

  6. ライオン株式会社様 パーソナライズされたレコメンドAIの開発

  7. 国際的機関の組織内システム開発

  8. 既存会計サービスのUI/UXデザイン改善

  9. 株式会社 クリニカル・トライアル 様 希少疾患SNS「RareS.(レアズ)」

  10. 保育園関連情報メディア開発

  11. 飲食店マッチングネイティブアプリ開発

  12. マッチングサイトメッセージ機能開発

  1. 製造業のDX支援〜営業日報管理システム開発〜

  2. ウォータージェット加工.com サイトリニューアル

  3. 佳秀バイオケムサイトリニューアル

  4. ライオン株式会社様 パーソナライズされたレコメンドAIの開発

  5. 佳秀工業株式会社コーポレートサイトリニューアル

  6. 開発コンサルティング

  7. 団体管理システム

  8. ITコンサルティング

  1. Webサイト訪問者分析のためのデータ分析基盤構築

  2. 製造業のDX支援〜営業日報管理システム開発〜

  3. ライオン株式会社様 パーソナライズされたレコメンドAIの開発

  4. 生産管理システム

  5. 仮想化サーバー導入

  6. タブレット端末導入

  1. ライオン株式会社様 パーソナライズされたレコメンドAIの開発

  1. イベントサイト 「オンラインで集まろう 学研クリスマス&おとしだまウィーク」

  2. ウォータージェット加工.com サイトリニューアル

  3. 佳秀バイオケムサイトリニューアル

  4. スカイライト コンサルティング様コーポレイトサイトリニューアル

  5. ハイブリィド株式会社 様 [ IT-Manager SD ]

  6. ライオン株式会社様 パーソナライズされたレコメンドAIの開発

  7. 国際的機関の組織内システム開発

  8. 既存会計サービスのUI/UXデザイン改善

  9. 株式会社 クリニカル・トライアル 様 希少疾患SNS「RareS.(レアズ)」

  10. 人材マネジメントシステムUI/UXデザイン

  11. 保育園関連情報メディア開発

  12. Vareal株式会社中途採用情報サイト

Design

【WebデザインをするならXD!】 Webデザイナー歴10年のデザイナーがPhotoshopからXDに乗り換えた理由

デザイナーの福田です。
みなさん、Webサイトはどの アプリケーションでデザインしていますか?
Photoshop、Illustrator、XDでしょうか?
これまでいくつかのソフトを渡り歩いてきましたが最終的にXDにたどり着きました。
今回は、なぜXDをWebデザインのメインツールとして使うようになったのかその経緯も踏まえて説明したいと思います。

XDに乗り換えるまでの流れ

Fireworksに乗り換えようとするも…

デザイナーとしてWeb業界に入り、10年経ちますが当初はPhotoshopを使っていました。というよりも当時、社内ではPhotoshop一択でした。
その後、Web制作に特化したFireworksに乗り換えようという動きがあり社内のデザイナー達が試してみるも、とにかく動作が重くすぐ落ちるといった不満が多く浸透することはありませんでした。

Fireworks
かつてAdobeが販売していたグラフィックソフト。Webをターゲットにした画像作成・出力を目的に作成されたが、2013年Creative Cloudに移行されるのと同時に、CS6以降のバージョンの開発がされないことが発表された。

Illustratorの波

その後、IllustratorにもWebの機能が増え、Web制作はPhotoshopよりIllustratorが向いているという波が来たのですが、元々紙のデザインを目的とした作りになっているのでWebの機能が実装されても端数が出たり、コーダーに共有する時にバージョンの違いでファイルが開かなかったり不便な点が多く結局、Photoshopに戻ることになりました。

XDの登場

そして2016年、XDの登場です。とはいえ、リリース直後から使っていたわけではありません。
まだベータ版ということもあり、今と比べるとかなりできることは限られていたのでPhotoshopから乗り換えようとはなりませんでした。
ですが、動作はサクサクで軽く、無料で使えるということもあり、今までパワポで作っていたワイヤーフレームはXDで作るようになります。

XDに乗り換えた理由

その後様々な機能が実装されましたが、XDをメインで使いたいとなった決めてはやはり、「リピートグリッド」でしょう。
これはお知らせ一覧や画像一覧、テーブルなど同じ要素の繰り返しを作る時に大変便利で当時は衝撃を受けた覚えがあります。
PhotoshopやIllustratorでは各要素をコピーして作成し、修正が入った場合は一つずつサイズやマージンを調整する必要がありますが、その手間が一気に解消されました。
(※2021年9月現在:Illustratorにも同じ機能が実装されています。)


その後、多角形ツールやドロップシャドウ、ガイドラインなどPhotoshopやIllustratorではおなじみの機能が続々と実装されてワイヤーフレーム用ツールのXDはデザインツールへと昇格を果たしました。

Photoshop、Illustrator、XDのメリット・デメリット

ここでPhotoshop、Illustrator、XDでWebデザインを制作するうえでのメリット・デメリットを紹介します。

Photoshop

メリット

  • 画像の加工や編集ができる
  • 複雑なデザイン制作に強い
  • 幅広いデザインに対応できる

テクスチャやパターンを多用したり、画像の切り抜きが必要なデザインはPhotoshopが向いています。

デメリット

  • 動作がllustrator、XDに比べると重い

特に画像サイズが大きかったり、アートボードが多いと重くなります。

Illustrator

メリット

  • ロゴやアイコンの制作に強い
  • イラストの制作に強い

ロゴやアイコンはIllustratorが一番作りやすいです。

デメリット

  • デザインカンプをコーダーに共有するためのツールがあまりない
  • サイズや余白の数値に端数が出る
  • 画像の加工や編集に弱い

数値が端数だとコーダーの方が困ります。

XD

メリット

  • プロトタイプ機能でリンク移動を再現することができる
  • デザインカンプをブラウザ上ですぐに共有できる
  • 動作が軽い

プロトタイプ機能は実際のWebサイトのように見せることができるのでとても便利です。

デメリット

  • パターンやテクスチャの機能が弱い
  • 複雑なデザインに弱い
  • 画像の加工や編集ができない

パターンやテクスチャはプラグインやリピートグリッドを使う手段もありますが、あまり使い勝手はよくありません。

まとめ

PhotoshopからXDに乗り換えたとはいえ、Photoshopを使わなくなったわけではありません。
もちろんIllustratorも使います。役割は以下のように分けています。

  • XD:Webサイトのメインデザイン
  • Photoshop:凝ったデザインのメインビジュアル
  • Illustrator:ロゴ、アイコン

メインツールはXDへと移行しましたが、まだまだXDでもできないことは多いのでそこを補うのがPhotoshopとIllustratorだと思っています。

VAREAL(バレアル)はWeb制作の仕事も受け付けておりますのでお気軽にお問い合わせください。


Varealの制作部門のサービス内容はこちら
クリエイティブサービス事業

Varealの制作部門の実績はこちら
WORKS クリエイティブサービス

関連記事

%d bloggers like this: