« 鯛めし〜 | トップページ | さらばiDVD »

Adobe Museでサイトをレスポンシブ化した

Resp1

 昨年に引き続き、年末年始の休みが短くて貴重です。
 今やっておかないと、絶対にできないことがいくつかあって、そのうちのひとつが自分サイトのMuseによるレスポンシブ化です。

 レスポンシブ化については、最近「ついろくろを回してしまう意識高い系」が否定するようなことを言い出しているようです。 こいつら、いつまでこんな言葉遊びに興じるつもりでしょうかね。 ほんと、こいつらがwebデザインを楽しく無いものにしたんです。

 ま、それはさておき、webコースの学生が苦しんでいるレスポンシブが、Museでは比較的簡単に、しかもコードを一切書かずに実現できるようになっています。
 一方、自サイトのデザインはちょうど一年前、AppStore申請用に急ぎiPhoneに最適化と言い訳しつつ、あんまり褒められた出来ではありませんでした。 でもこれすらMuseがあればこそ実現したんですけどね。

 相変わらずMuseの解説本は出版されていないものの、最近のAdobe系はオンラインのチュートリアルビデオが充実していて、レスポンシブ化についてはこちらを見ることで勉強。 音声は英語ですが、日本語スーパーがついているので心配はありません。 余談ながら、以前は音声も日本語だったのを観た気がするのですが、今探してみたらどうやっても探し出せませんでした。

 なにはともあれ、先月あたりからローカルで実験開始。 徐々にコツがわかって、先ほど全て完成してアップロード完了です。
 サイズはパソコン(1920px)、タブレット(800px)、スマホ(480px)の3タイプに設定。 最小は自分のiPhone 5sの360pxですが、ここまで縮めるとさすがに崩れが出るのは避けられないようです。
 昔はこのあたりのwebデザインはDTP的に精密だったのに、レスポンシブだから、という言い訳一つでかなり堕落したような気がします。 まぁ、そういう意味では冒頭のレスポンシブ見直し論もわからないではありません。
 この崩れ、ブレークポイントごとにデザインを変更する処理をすれば完璧に防げますが、これを進めて行くとユーザーエージェントにより複数デザインを切り替えていた方法に比べてのメリットがなくなってしまいます。
 
 Museでのコツとしては、各アイテムの位置、サイズ、およびこれらのグループ化を細かく使い分けないと、複数のアイテムがそろって移動、拡大縮小してくれません。 あとは上記ブレークポイントで隠す/表すの切り替えも強力な武器です。
 また、細かいところでは標準ウィジェットにあるアコーディオン機能など、ワンタッチでサイズ変更対応していないのが気になりました。

 フォントに関しては、チュートリアルビデオで、現在はまだサイズの自動変更には対応していない、という下りがあり、確かにそれが実現したらもっといい感じになるのに、とアップデートに期待したくなります。

 しつこくなるけどね、やっぱりこういうツールでモノを作るってのがMacらしいと改めて感じました。 サクサクっと図形や線を描いて色を設定、画像を貼り付け、テキストを配置。 それらをマウスで好きに移動。 仕上がりはプロ並み。 ページメーカーとかハイパーカードとかそうやってワクワクしながら遊んで学んだんだけどなぁ...
Resp2
Resp3

|

« 鯛めし〜 | トップページ | さらばiDVD »

パソコン・インターネット」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




« 鯛めし〜 | トップページ | さらばiDVD »