記事の詳細

前の記事はこちら

Adobe XDを使ってワイヤーフレームを作る その1【ファイルの作成とアートボードの設置、パネルの見方】
Adobe Experience Designの正式版リリースソフトであるAdobe XDは、Adobeから提供されるWEBサイトやモバイルアプリのデザイン、プロトタイプの作成が、これ一つでできる...
Adobe XDを使ってワイヤーフレームを作る その2【ツールとアセットパネル、レイヤーパネル】
前回の記事はこちらAdobeXDのツールパレットと各パネルCtrl+Yでレイヤーパネルを展開することができます。 レイヤーパネルの左にあるのがツールですが、上から選択ツー...
Adobe XDを使ってワイヤーフレームを作る その3【それぞれのツールの簡易的な説明とパネルの変化】
前回の記事はこちらこの間自宅のMacでAdobeXDを操作したら普通にメニューが出てきてびっくりしました。Windowsだとハンバーガーメニューに収納されているんですけど……。...

AdobeXDのリピートグリッド

ホームページのワイヤーフレームを作っていると、たびたび「同じものの繰り返し」を利用することになります。新着記事を3枚、お知らせを3行、また商品案内のバナーを5枚、といったように。
こういった処理をIllustratorやPhotoshopで行うと、同じ画像を重複して何回もコピーアンドペーストすることになります。これがだいぶ手間だったのですが、AdobeXDのリピートグリッドを使うと、作業はずっとらくになります。
基本操作は、リピートする画像を指定して、表示された枠を広げるだけです。

Adobe XD【リピートグリッド説明画面1】

任意のオブジェクトを選択すると、右のパネルが展開し、「リピートグリッド」と書かれたボタンが表示されます。これをクリックすると、指定したオブジェクトにリピートグリッドが適応されます。

Adobe XD【リピートグリッド説明画面2】

レイヤーパネルは「リピートグリッド」に変換され、もともとあった「リピートグリッドに変換」のボタンは、「グリッドをグループ解除」というボタンに代わります。オブジェクトに緑色のラインがついて、ハンドルのようなものがリピートできる方向に設置されます。
このハンドルのようなものを引っ張ると、オブジェクトがリピートされます。

Adobe XD【リピートグリッド説明画面3】 Adobe XD【リピートグリッド説明画面4】

このオブジェクトの間にカーソルを置くと、ピンク色の幅が見えます。これもドラッグすることでサイズを自由にコントロールすることができます。

Adobe XD【リピートグリッド説明画面5】 Adobe XD【リピートグリッド説明画面6】

オブジェクトは単体でなく、グループ化されたものでもリピートできます。

Adobe XD【リピートグリッド説明画面6】

「グリッドをグループ解除」のボタンをクリックすると、グリッドが解除され、各々のオブジェクトが単体で動かせるようになります。

Adobe XD【リピートグリッド説明画面7】

テキストやテキストを一緒にリピートした場合、リピート後にテキストを打ち変えることができます。

Adobe XD【リピートグリッド説明画面8】

AdobeXDのシンボル

Illustratorでもよく利用されるツールですが、シンボルとは単体、あるいは複数のオブジェクトをグループ化して保存しておく「ひな形」のことです。シンボル化しておくと、ひな形を編集したときに、画面上に配置されたすべてのシンボルが編集されるようになります。
右クリックで「シンボルを作成」を選択すると、あらかじめ選択したオブジェクトからシンボルが生成されます。

 

Adobe XD【シンボル説明画面1】

Adobe XD【シンボル説明画面2】

 

シンボル化するとアイコンが変化します。左下にある同じアイコンをクリックすると、シンボルとして登録されたことがわかります。登録されたシンボルをパネルからドラッグアンドドロップすることで、アートボード上に増やすことができます。

Adobe XD【シンボル説明画面3】

コピーしたシンボルでも、元となるシンボルでも、アートボード上にあるシンボルをダブルクリックすると編集が可能な状況になります。どれか一つでも編集すると、すべてのシンボルに編集が適応されます。

Adobe XD【シンボル説明画面4】

AdobeXDを利用していて思うことのあれこれ

このシリーズをブログを書き始めてから三つほどAdobeXDでワイヤーフレームを作成しました。
ようやく慣れてきて、手ごたえを感じてはいるのですが、どうにも何か、こう、不安が付きまといます。

AdobeXDを利用すると、何もかもが早くなる、という実感があります。
早くなった分、いろいろ思考回路が働いて「もっとよく」ができるようになります。
トライアンドエラーの回転が速くなる分、もっと前の段階、WEBサイトを作る企画そのものに、きちんとした主旨やコンセプトがないと、トライするものもエラーするものもない、何を作っていいのかわからない、という状況になりそうな……予感……。
サイトマップさえないWEBデザインはまずできなくなる、と思ったほうがいいのでしょう。
というかサイトマップがないWEBサイトなんてどうデザインしてきたのでしょう。いくつかそんな案件もございましたが、「コミュニケートする材料を生み出せるツール」として非常に優秀なAdobeXDは、そういった「無計画」を浮き彫りにしていくツールにもなっていると思います。

WEBサイトはお客様とWEB屋の共同作業。何を作りたいのか、という目的をもって、主体性をそれぞれ守りながら、良いお仕事をしていけたらいいなぁと思います。
(次回は画面の出力の仕方を記載していきます)

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

The following two tabs change content below.
久保田 里美

久保田 里美

価値あるコンテンツ制作部インクループ株式会社
デザイナー。コンセプト設立からデザインを理論立てて起こすことをポリシーに、WEB媒体から紙媒体まで幅広く手掛けていきたいデザイナー。日々勉強日々精進。

ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

AD

ページ上部へ戻る