こんにちは、福岡のホームページ制作、シンス株式会社です。
最近の話題といえばこれですね、NHKの朝ドラ「半分青い」。
4月から放送が始まり全156話、ついに来週で最終回ということで、毎日見ていた自分としては寂しい限りでございます。
実はこのドラマの中で、主人公の二人がとある商品開発に命をかけて取り組んでいるのですが、そのモデルとなっているのが「BALMUDAの◯◯」なんですよね。BALMUDAファン(=寺尾社長のファン)の僕としてはその辺も含めて、最終回まで目が離せない!
以上、近況報告でした!
それでは毎月恒例、Adobe XDアップデート情報いってみたいと思います!
今回も「アップデートさわってみよう会」を緊急で開催し、参加者の方と一緒に研究を行いました。
これによって一人で勉強するとは違う、このような部分も一緒に交えて新機能をご紹介したいと思います。
- 基本的なアップデートの紹介だけでなく「どこでどう使えるのか」というリアルな意見
- 使ってみての正直な感想
目次
サクッと5分で振り返る!Adobe XD 9月アップデート
レスポンシブリサイズ
(Adobe公式サイトより拝借)
兼ねてから噂されていたレスポンシブ機能がついに追加!
操作するモードは「自動」と「手動」なるものが存在します。
ただ実際に触ってみて…「操作に慣れるのには時間がかかりそう…」という結論になりました(笑)
自動
文字通り、複数レイヤーで構成されるオブジェクトのサイズ/位置を「いい感じに(=自動)レスポンシブ化」することができます。特に「SPデザインからの展開」を効率的に行うことが可能になりました。
手動
難しかったのがこちら、「手動」です。
より詳細な設定を「手動で」行いたい場合、このエリアで調整ができます。
基準となるレイヤーに対し(この画像でいうと黒背景)、中に存在するレイヤーはどこを基準に固定するのか、オブジェクトのサイズはどうするのかを詳細に設定できます。では、やってみましょう。
自動で意図しない場所に動いてしまったりした場合にはいいと思うのですが、
- 果たしてここまで細かい設定を使うシーンがあるのか…
- レイヤー単体でシンプルに位置調整してそう…
という意見が出ました。
ということで、こんな時に使えるな!!というシーンをこれから探してみようと思います。
タイマートランジション
プロトタイプの設定に「時間」という選択肢が追加されました。
これによってタップして画面遷移するだけでなく「設定した時間で画面が自動で遷移する」という効果をつけられるようになりました。
タップをしないので、特定のレイヤーではなく「アートボード全体」に対しての効果です。
果たしてどこで使えるのか!?
(Adobe公式サイトより拝借)
- アプリの操作方法アニメーションの再現(↑動画参照)
- ローディング画面の再現
- ページ遷移時に出てくるポップアップなど
これはアプリデザインをする方には特に良い機能!
より動きのあるUIデザイン/ウェブデザインが可能になりました。
スペルチェック
文章校正ツールは日本語/英語ともに精度が高いものが多いですよね。
その流れを受けてXDでも校正機能が追加されております。
- 実際に打ってる時点からチェック、正しい単語がサジェストしてくれる
- 文章をコピペした後でも、文字編集状態の時に怪しい単語は赤い点線で表示される
- まだ日本語対応にはなっていないよう涙
Webプロトタイプのフルスクリーン表示の改善
プロトタイプURLの改善です。今までは作成したアートボードの横幅が優先されていたものが、この機能にチェックを入れることで「ブラウザ幅」を優先に可変してくれるようになりました。どういうことかというと、
<昔>
- 例えば横幅1920pxで作ったデザインを、それより小さい幅のブラウザで確認する時、左右にスライドしなければ見れなかった。
- 逆にデザインより広いブラウザで見る場合、黒い背景が左右に現れた。
- 他にもプロトタイプURL画面のUIが色々と配置されていて、純粋にデザインだけを見れない…
<アップデート!>
- ブラウザ幅に合わせて可変する
- ブラウザ幅が大きくなったら黒→白背景に変わった
- ブラウザの高さより小さなサイトは上端に引っ張られる
- UIが全部非表示になってデザインだけを見ることができる状態になった!(escボタンで元に戻る)
ただ、これは注意!
- 見る人のブラウザに依存するので、コンテンツ幅も縮小される。=実寸での確認には向いてない!
いかがでしたでしょうか。
以上、9月のアップデートでした!
10月もアップデート勉強会、開催予定です!
ホームページの企画から制作、運営までをフルサポート。リスティング広告やSNS広告の運用支援もご相談ください。