freefuntimes今までワイヤーフレームやデザイン起こす際は、主にフォトショップを用いて対応していたのだが、PCのメモリが不足している関係で、かなりもっさりした動きの中で対応していたので、どうにかならないかと考えていた。社内でXDを使える人がいないこともあり、せっかくの機会にできるようにしておいたほうがいいと思ったのがきっかけだ。自分が覚えれば他の人にも教えられ、使える人が増えていくので、会社全体にもメリットが少なからずあるはずだ。実際に学習してみると、動作も軽く、これまでイラレやフォトショを使ってきた人にとっては、操作が似ている部分が多いので、とっかかりやすいのではと感じた。個人的に便利だなーと思ったのが、マスターコンポーネントやリピートグリッドの機能である。上手く説明できるようなレベルではないが、とにかくいかに手間を省いて効率よくできるかが考えられて設計されているように感じた。マスターコンポーネントでは、同じデザインのボタンをたくさん使う場合などに役に立つ。クライアントにデザインを提出したあとに、ボタンの色を変えて欲しいと修正が入ったとする。この時に、フォトショであれば、全てのボタンの色を一つずつ変えていかなくてはならないが、XDでは一つのボタンの色を変更するだけで、他の全てのボタンが変更できてしまうのだ。このマスターコンポーネントの機能は、ほんの一例に過ぎないが、とにかく何度も同じことをしないように工夫されているのだ。リピートグリッドの例もついでにあげておく。「画像の枠+画像の下側にテキスト」のようなデザインが繰り返し縦に並んで続くような時、対象部分を全て選択した上で、リピートグリッドを使うと、ハンドルの下の部分をドラッグするだけで、同じデザインが繰り返されるように調整することができるのだ。余白の調整も簡単に行えるのですごく便利な機能だと感じた。すごいのが、そこに画像やテキストを流し込みたい場合である。先程のリピートグリッドで5つの縦に並んだ要素を準備したとする。フォルダにあらかじめ5つの画像を準備しておき、フォルダ内の5つの画像を全て選択した状態で、XDの画像部分にドラッグ&ドロップすると、自動的に5つの画像が入ってくれるのだ。これを初めて見た時は、衝撃だった。上記は画像の例で紹介したが、もちろんテキストでも可能である。やり方は画像とは少し異なるが、とにかくこのような便利な機能がたくさんあるので、これから学んでみたい方には十分おすすめできると感じた。他にも、リンクを作成・共有できたり、プロトタイプでページ遷移の設定ができたりと、本当に幅広い機能がある。ここに書くと長くなりそうなので記載はしないが、とにかく興味深い機能が山ほどあるのだ。今後はUdemyのXD講座も購入しているので、そちらを学習しつつ、書籍で理解できなかった部分や、忘れている部分も振り返りながら、基礎を覚えていけるようにしようと思う。関連記事JavaScriptとjQueryでスムーススクロールに対応したハンバーガーメニューを作ってみたJavaScriptのfor文で中身がふわっと表示されるタブ切り替えを実装してみる(パターン1)(備忘録)案件に応じた適切なフォントサイズ対応について考えてみる(備忘録)ハンバーガーメニューを展開してからのメニューをさらに展開させるメニューをjQueryで作ってみた。(2)人気ブログランキングこのサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシーと利用規約が適用されます。