先日、息子の依頼を受けて息子のお店のWEBページをリニューアルしました。
- Adobe Museで息子の店のホームページ制作
→http://blog.goo.ne.jp/mkuratani_2011/e/3391910603bc14167334bd4c317d903c
案外にスンナリとできたので、覚えている間にマンドリンの粂井謙三さんと清水谷高校ギター部のページもリニューアルすることしました。
Adobe Museの便利なところ
- 従来なら写真はJPG形式・解像度72dpiに保存後リンクを確認して、サーバーにアップロードしなければなりません。
Museは、psd形式の写真でも画面上でサイズ指定さえすれば、MuseがJPG形式なおかつWEB用に「善きに計らって」imageフォルダに保存してくれます。
ただし、 名前は半角英数字になっていないと、ftpサーバーにアップロードできませんので注意は必要です。 - 写真・オブジェクトや文章の配置はIllustratorを使っている感覚で「配置」できるので超便利です。
- マスターを作成時にメニュータイトルを決めておけば、ページ同士のリンクもこれもMuseが「善きに計らって」くれます。
これも、html形式に保存するときは半角英数字でなければなりません。
大きな写真を使ってタイトル代わりにしたかったので、今回のリニューアル部分はまずは完成です。
これからが、今回の正念場です。
そう、iPhoneやスマートフォンなどでも見やすいページにしたかったのです。
デスクトップで見る限りはいいのですが、iPhoneで見ると余白が大きくできたり文字が妙に小さくなったりと、とても使い勝手が悪い。メニューなど押せたものでありません。
まずは、小さい画面用にボタン感覚で操作できるスクロールメニューを作り、次に画面が小さくなった時に表示できるようにしました。ネットを調べながら、試行錯誤しました。
- 第21回「スマートフォン向けのナビゲーションメニューを作成する（1）」
→http://design-zero.tv/school/muse/vol21.html -
第22回「スマートフォン向けのナビゲーションメニューを作成する（2）」
→http://design-zero.tv/school/muse/vol22.html
画面の表示が崩れるのを防ぐ対策は、Museの画面上部のスライダーを調節して「可変ブレークポイント」を作成しポイントごとに画面の調整が必要なようです。
デフォルト以外に、600pixel 768pixelの２カ所にブレークポイントを追加しました。
私の手元にはiPhone6 Plusがあり、２年前まで使っていたもっと小さいiPhone4sも電源を入れてチェックの開始です。
Adobeの仮サーバーに登録して、８枚のページ毎に２台のiPhoneを縦にしたり横にしたりして眺めての確認をしその都度調整します。
見え方以上に大事なことは、「見出し」の作成。
テキストを記入している時デフォルトは「段落」なので、検索エンジンにヒットするように下記の文言は「見出し」に設定しました。
- 倉谷音楽事務所・粂井謙三・松村雅美・杉浦知美・KENZOTRIO・クラッティー二
「シジュフォスの神話」にあるような、”いつ終わるともしれない作業”を丸一日繰り返し、とりあえず更新しました。
ftpサーバーにアップしたものを変更する時は、変更したファイルのみを置き換えるとリンク切れを起こすようなので、全部削除して新たにアップロードした方がいいみたい。
画面の大きさが変わるごとに、サイズの変更になったものをリンクし直してるのかもしれない。
今はまだiPadでの確認もしてないし、アンドロイド系は手付かずですが自分の視界にないことまでは気が届かん。
"Out of sight, out of mind!!"
「今日はここまで！！」
※コメント投稿者のブログIDはブログ作成者のみに通知されます