Adobe XDでホームページを効率よく制作できる
投稿日：2015.03.30.
更新日：2025.04.12.
株式会社TREVOのブログは、Web制作の現場で日々奮闘しているスタッフが、企画・デザイン・開発・SEO・運用まで幅広いテーマで執筆しています。
「分かりやすく、役に立つ」ことをモットーに、ホームページ制作や運営のヒント、トレンド情報、日々の気づきを発信中です。大阪を拠点に、全国のお客様と向き合いながら培った現場目線のノウハウを、実体験ベースでお届けします。
初めてホームページ制作をご検討の方から、リニューアルや集客強化を考えている方まで、何かヒントになる情報があればうれしいです。
記事へのご質問やご相談も、お気軽にお問い合わせください。
執筆記事：記事一覧ページ
2005年から WEB 業界一筋。500サイト超を手がける SEO・WordPress のエキスパート。「公開後こそ本番」を掲げ、データ分析とユーザー視点で成果を引き出す運用を提案。
2005年に制作会社へ入社後、プログラマーからキャリアをスタート。サーバー構築・データベース設計で培った技術を強みに、WordPress テーマ／プラグイン開発やサイト移行の難案件を多数担当してきました。
2010年以降は SEO エンジニアとしても活動領域を拡大。コンテンツ設計・内部リンク最適化・高速化チューニングにより、競合の激しいビッグキーワードで上位獲得を実現してきました。
現在は TREVO のウェブディレクターとして、要件定義から運用改善まで一気通貫でリード。AI ライティングや GA4／Looker Studio を活用したレポーティング手法を開発し、「数字で説明できるサイト運用」をポリシーにクライアントの ROI 最大化を支援しています。
趣味／強み：筋トレとランニングで日々の集中力をキープ。複雑な課題を“仕組み”で解決するのが得意。
モットー：「サイトは資産。改善を止めた瞬間から価値は目減りする」
SNS:x（旧 Twitter）@TREVO_WEB
いまさら感がありますが、最近やっとAdobe XDでのサイト制作を進めているTREVOの板浪です。
これまでphotoshopをメインにsketchやエクセル等でホームページの構成を制作して進めて来たのですが、ここに来てAdobe XDに乗り換えた所、凄く便利だったので記事にしました。
ここ最近、弊社のお客様に対しての記事が多かったのですが、せっかくなのでツール系の記事も書いていこうかなと考えています。
Adobe XDが良い点
軽い
アートボードと呼ばれる、各ページの作業領域をいくら増やしてもサクサク動いてくれます。
これまで、社内の連携を考えてphotoshopメインで構成を作成していたのですが、アートボードを増やすとどんどん重くなっていくので大変でした。
デザイン時には、アートボードが10～20に増えると開くのも大変だったのですが、Adobe XDは軽い。開くのも編集するのもサクサク動いてくれるので、制作自体が凄く楽しくなりました。
早い
軽いのでサクサク制作を勧められるのはもちろんなのですが、繰り返しコンテンツの表示はいちいちコピペして間隔の調整をしなくてもリピートグリッドでサクッと表示出来たりします。
Photoshopで編集していた時に活用していたAdobeクラウド上の素材も簡単に読みこむ事も出来ます。
なので、ヘッダーやフッター等のコンテンツパーツを用意しておく事で、ある程度の構成を配置するだけで作成する事が出来ます。
私は基本的に、一度紙にコンテンツの置き場所を決めてからソフトで制作を進めるのですが、配置が決まっているとパーツを用意していれば、置いていくいくだけの作業となります。
そこで、レスポンスがPhotoshopよりも早いのでストレスなくサクサクと進める事が出来ます。
ブラウザでの確認
Adobe XDではプロトタイプの公開という機能があります。
プロタイプで公開するとデザインをブラウザで直接確認する事が出来ます。
これまでだと、100%表示で確認するか、jpgで書き出してブラウザで確認等をしていたのですが、Adobe XDから直接書き出す事でお客様に確認して頂く事も可能です。
大阪のホームページ制作会社TREVOでは、最短2日で仮サイトを公開できるスピード対応や、SEO対策に強いオリジナルデザインの制作サービスを提供しています。
