記事の詳細
Adobe XDを使ってワイヤーフレームを作る その4【リピートグリッドとシンボル】
前の記事はこちら
今回のブログの見出しはコチラです！
AdobeXDのリピートグリッド
ホームページのワイヤーフレームを作っていると、たびたび「同じものの繰り返し」を利用することになります。新着記事を3枚、お知らせを3行、また商品案内のバナーを5枚、といったように。
こういった処理をIllustratorやPhotoshopで行うと、同じ画像を重複して何回もコピーアンドペーストすることになります。これがだいぶ手間だったのですが、AdobeXDのリピートグリッドを使うと、作業はずっとらくになります。
基本操作は、リピートする画像を指定して、表示された枠を広げるだけです。
任意のオブジェクトを選択すると、右のパネルが展開し、「リピートグリッド」と書かれたボタンが表示されます。これをクリックすると、指定したオブジェクトにリピートグリッドが適応されます。
レイヤーパネルは「リピートグリッド」に変換され、もともとあった「リピートグリッドに変換」のボタンは、「グリッドをグループ解除」というボタンに代わります。オブジェクトに緑色のラインがついて、ハンドルのようなものがリピートできる方向に設置されます。
このハンドルのようなものを引っ張ると、オブジェクトがリピートされます。
このオブジェクトの間にカーソルを置くと、ピンク色の幅が見えます。これもドラッグすることでサイズを自由にコントロールすることができます。
オブジェクトは単体でなく、グループ化されたものでもリピートできます。
「グリッドをグループ解除」のボタンをクリックすると、グリッドが解除され、各々のオブジェクトが単体で動かせるようになります。
テキストやテキストを一緒にリピートした場合、リピート後にテキストを打ち変えることができます。
AdobeXDのシンボル
Illustratorでもよく利用されるツールですが、シンボルとは単体、あるいは複数のオブジェクトをグループ化して保存しておく「ひな形」のことです。シンボル化しておくと、ひな形を編集したときに、画面上に配置されたすべてのシンボルが編集されるようになります。
右クリックで「シンボルを作成」を選択すると、あらかじめ選択したオブジェクトからシンボルが生成されます。
シンボル化するとアイコンが変化します。左下にある同じアイコンをクリックすると、シンボルとして登録されたことがわかります。登録されたシンボルをパネルからドラッグアンドドロップすることで、アートボード上に増やすことができます。
コピーしたシンボルでも、元となるシンボルでも、アートボード上にあるシンボルをダブルクリックすると編集が可能な状況になります。どれか一つでも編集すると、すべてのシンボルに編集が適応されます。
AdobeXDを利用していて思うことのあれこれ
このシリーズをブログを書き始めてから三つほどAdobeXDでワイヤーフレームを作成しました。
ようやく慣れてきて、手ごたえを感じてはいるのですが、どうにも何か、こう、不安が付きまといます。
AdobeXDを利用すると、何もかもが早くなる、という実感があります。
早くなった分、いろいろ思考回路が働いて「もっとよく」ができるようになります。
トライアンドエラーの回転が速くなる分、もっと前の段階、WEBサイトを作る企画そのものに、きちんとした主旨やコンセプトがないと、トライするものもエラーするものもない、何を作っていいのかわからない、という状況になりそうな……予感……。
サイトマップさえないWEBデザインはまずできなくなる、と思ったほうがいいのでしょう。
というかサイトマップがないWEBサイトなんてどうデザインしてきたのでしょう。いくつかそんな案件もございましたが、「コミュニケートする材料を生み出せるツール」として非常に優秀なAdobeXDは、そういった「無計画」を浮き彫りにしていくツールにもなっていると思います。
WEBサイトはお客様とWEB屋の共同作業。何を作りたいのか、という目的をもって、主体性をそれぞれ守りながら、良いお仕事をしていけたらいいなぁと思います。
（次回は画面の出力の仕方を記載していきます）
この記事であなたの課題を解決することができましたか？
疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。
ほかの投稿も読んでみませんか？
コメント
この記事へのトラックバックはありません。
相模原のお店やサービスをどんどん紹介！
飲食店
サービス
この記事へのコメントはありません。