Top

usa*log 晴れ。ときどき、うさぎ王国

カテゴリ:デザインやなんかのこと( 45 )

IEはどこまで対応すべきなのか?と悩んで夜更かしした日。

できたら撲滅してほしいIE6ですが(笑)
強制的にアップグレードした、ってわりには「困っている」デザイナーさん、コーダーさんのブログなどよく見かけます。私もその一人です。

特にメディアクエリです。せっかくスマホ対応しようと苦労して書いたcssを読んでくれないので、とんでもないレイアウトになってしまい、昨夜も遅くまでいじいじと直していました。結局別のcssを読ませるしかないのですが、これもまた思った通りにならない。

結局8以前のものだけ別cssに。検証サイトで確認した限り、9には特に問題もなかったので。こちらでIEのいろんなバージョンが疑似体験(?)できます。
そう、疑似体験なのです。
MacとiPhoneしかないので、Windowsは友人知人にお願いしています。でも、第三者の目で見てもらうと、おおっ、気が付かなかったよ!ということがよくあります。感謝です。でもさすがにIE6とか7の知り合いはいないかも(笑)

Macはいろんなブラウザを同時に立ち上げられるので、いつもFirefoxとSafariで確認しています。それとiPhone4s。
でも昨夜は古いバージョンを見ていたので、ものは試しとMac版IEの最新バージョンで検証。この最新というのが、10年ほど前にアップグレードを終了したとんでもない最新版IE5.5(笑)
a0026762_18584852.jpg

なつかしいでしょう?ブラウザのカラーがiMacの色に変えられるアレです。
ボンダイブルーがデフォルトだったような?

大きい画像はこちら
せっかくなので見ておいてください(笑)ちなみにIE6でも文字はカクカクしてますが、どうにか見えています。
新しいブラウザ(FIrefoxとSafali)で見てもほとんど変わらないです。border-radiusのCSSはまだないけど...まあ、角が四角いだけで何の差し障りもありません。
捨てないでおいてよかった...mac版IE5.5やるじゃないですか!
[PR]
by usa-log | 2013-01-31 19:43 | デザインやなんかのこと | Comments(0)

twitterのウィジェット(旧タイプ)のh3

サイトにちっちゃい窓でtweetを埋め込むアレの話です。

まず最初にお断りしておきますが、すでにもっと新しいウィジェット「埋め込みタイムライン」が提供されています。
twitter→アカウント→プロフィールを編集→ウィジェットで簡単にタグが作成されます。
が。なんで使わないのかと言うとカラーの自由度が少なくてさびしい。。(白と黒しかないw)


先日、お客様のサイトに埋め込みを頼まれて、旧タイプをサイドバーに設置していました。背景色などを変更できるので、サイトに自然に溶け込む感じにできます。

その時の「へ?」ってなった話。
うちのサイトで再現してみます。(タグの話になっちゃうからつまんないかも...自分用に覚え書きです)

a0026762_11531858.jpg
むむっ?名前の背後のヘンな模様はなにっ!
しかもミョ〜な間があいている。
不審に思ってソースを開いてみると、
a0026762_11542077.jpg

名前の前後が h3 タグで囲まれています。

a0026762_1155537.jpg
サイト内ではすでに h3 タグを使用中。cssは後から指定したもの優先なので、 head 内で指定した背景画像まで、ウィジェットのcssが引っ張ってきちゃったもよう。

h3 {
font-size: 110%;
color: #7E4049;
font-weight: normal;
line-height: 260%;
padding-left: 100px;
background-image: url(usagi_icons/berry/berry.gif);
background-repeat: no-repeat;
background-position: 0px;
clear: both;
}

文字指定、背景画像指定、さらに写真の回り込みまで解除してるせいで間が空いてしまいます。文字はウィジェットの指定になっているようです。

リンクしているcssをいじってしまうと、他のhtmlファイルまで変更しなくてはなりません。仕方ないのでトップページのみ、 h3 にclass usagi を指定することにします。

h3 {
font-size: 110%;
color: #7E4049;
background-image: none;
line-height: 260%;
padding-left: 100px;
font-weight: normal;
clear: none;
}
一度、背景画像をナシにして回り込み解除もナシ。

.usagi {
background-image: url(usagi_icons/berry/berry.gif);
background-repeat: no-repeat;
background-position: 0px;
clear: both;
}
あらためて、classで指定し直し。

これで
a0026762_12185253.jpg

きれいになりました!


早く「埋め込みタイムライン」のカスタマイズができるようになるといいですね。


ということを書いていたら、タグに使う< >を使用するとそのままタグとして認識されてしまい、h3という文字を表示したいのに、以後の文章がブログが指定しているh3の太字で表示されてしまってわけわかんないことに。。。(^^;
[PR]
by usa-log | 2012-11-15 12:25 | デザインやなんかのこと | Comments(0)

Edge Animate練習中。(夜の部)

とうとう夜の部になってしまいました。
a0026762_092940.png
うさぎ餅最新CM

先月ダウンロードしてそのままになっていたEdge Animate。
新しいものを試したい気持ちもあったのですが、Flashのタイムライン的インターフェースをひと目見て、しょんぼり(笑)なかなか手つかず。
今日思い切って立ち上げて、一日いじっていました。昼間も書いたけど、レッスン画面はほんとうに親切。ここをクリックして数値を入れます、ってところをちゃんと実際の画像を使って解説してくれるので、文章だけでは意味不明ってことがないです。他にも私が使える程度のことはAdobeのヘルプを探せば、簡単に解説されているようです。

今回は自分ちの商品「うさぎお供え餅」をテーマにCM作るつもりで練習してみました。
次はカレンダーのCMでも作ろうかな。い...いえ、その前にカレンダー作り、ですよね。(^^;
[PR]
by usa-log | 2012-11-11 00:09 | デザインやなんかのこと | Comments(0)

Edge Animate練習中。(午後の部)

午前中のはあまりにあんまりなので、もうちょっとがんばってみました。
うさぎ餅CM風

a0026762_18453378.jpg

ページの一部として表示できるようになって、動きも少しは工夫しました(当社比)。
可愛いなとか楽しいな、とか思っていただければそれでじゅうぶんです(^^)
[PR]
by usa-log | 2012-11-10 18:44 | デザインやなんかのこと | Comments(2)

Edge Animate練習中。

AdobeのEdge Animateを試してみました。

ここに直接埋め込むことはできないので、こちらをどうぞ。(期待しないでねw)
a0026762_12313069.png
まだまだこんな程度なのですが、なんとかなるかも?という感じ。(←なんとかのレベルによるw)
ページ全体のサイズを考えてなかったので、スマホで見ると右に寄ってしまうのですが、iPhoneでも動いてちょっと嬉しい。

親切なレッスン付なので、これは助かります。ファイルの保存場所の設定やら、実際のHTMLファイルに組み込む時のいろんな作業など...まぁ細かいことはいろいろありますが、とりあえず、私でも動くことがわかってホッ。
gifアニメーションのように単体でペタっと貼付ければOKとはいきませんが、Flashに替わる動画として期待してしまいます。

現在のバージョンは無償提供中、期限もないそうです。
ダウンロードは
Edge Animate
[PR]
by usa-log | 2012-11-10 13:03 | デザインやなんかのこと | Comments(0)

ティーバッグのユニバーサルデザインについて考えた。

先日、ホテルのビュッフェでランチする機会がありました。
ああいうとこって、飲み物類はコーヒーはサーバーに入れて保温プレートに載って、お茶はティーバッグがずらっと並んで、ポットが置いてあるのですね。

紅茶にしようと、カップを手に取ってティーバッグの前まで来たら、年配の女性に「普通の紅茶はどれでしょう?」と訊かれました。
a0026762_1827048.jpg
赤っぽいパッケージがシナモンアップルティー、紫色のパッケージがダージリン、グリーンは緑茶。
文字も小さいしトワイニングのダージリンが紫色って知らないとちょっとわかりにくいかも。そもそもダージリンって書いてあっても「紅茶」とは表記してないしw

人間は
赤い文字でと書いてある場合赤、と認識し
青い文字でと書いてある場合青、と文字よりも色優先で認識する...とどこかで読んだと思うのです。

トワイニング社は色で種類を表示してますよね。オレンジ色ならオレンジペコ、これはわかりやすい(笑)
でもそれを単独で持ってくると迷ってしまう。紫色から紅茶はイメージしにくいです。
a0026762_1864867.jpg
黄色に赤、あのお約束のブランドの方がわかりやすいに違いない。

ひとこと「紅茶」って書いてあれば済む問題なのだけど、業務用紅茶のパッケージを急遽変更もできないかと思われます。いっそ手書きのポップ(?)で「アップルシナモンティー 〜りんごの風味とシナモンが効いた季節のおすすめ〜」なんて説明してしまった方が親切だし選ぶ方も楽しい。

こういう仕事してるからデザインの利便性はやっぱり気になります。
小難しい本読んでわかった気になるよりも、街へでて体験することだなぁって。ビュッフェのドリンクコーナーで思いっきり学んだのでした。


しかし...です。
「限定ロールケーキ、1時半からパティシエが目の前でお作りします」というご案内を係の人が席まで来て教えてくれたのにもかかわらず。。。
気がついたらそこかしこの席にゴージャスなロールケーキのお皿が置かれている、今すれ違った女性はロールケーキのお皿を持っていたよね?
なのに。
どうして「終了いたしました」になる?・゜・(。´ノω・`)。ウウゥゥ
[PR]
by usa-log | 2012-11-01 17:53 | デザインやなんかのこと | Comments(0)

クラウドフォント、お試し。

a0026762_23472291.jpg
利用しているレンタルサーバーでtype squareサービス無料体験をやっているので。

で、何の話かと簡単に説明すると、
WeBページにサーバーにあるフォント(書体)をダウンロードしつつ表示するので、手元のPC(スマホ)に入ってなくても作った人が指定した文字で見られるというもの。モリサワという会社のサービスです。
最初っからシステムに入ってるフォントは限られているし、ちょっとおしゃれな文字で表示させたい、見て欲しいって時にどうぞ、っていうことです。

タイトル「ラブリーうさぎのアクセサリー・Beads*usa-shopへようこそ」部分のみ、「じゅん」というフォントで表示させています。なんとなく柔らかでカクカクしてないでしょ?角ゴシック系でご覧の方には丸さが感じられるかと思います。今、ヒラギノ角ゴで見てますが、多少は違う(笑)丸ゴだとたいして変わらない。

でもこれ、いちいちダウンロードするってことは余分なデータを落としてもらうってこと。
なので、あんまり大量に使えません。タイトルくらいなら迷惑にもならないと思う。モリサワが採用してるのは、必要な文字のフォントデータのみを生成する「ダイナミック・サブセッティング」の技術を導入して配信する方式、なのだそうです。
日本語フォント重たいからなー。1ページまるごと、なんて大変なことになりそう。大きな見出しくらいに使うのが賢そうです。画像と違って環境によってサイズが伸び縮みしてくれるのはありがたいですよね。

そんなことを考えつつ、タイトルだけ替えてみても正直さほどの代わり映えはしません。
アルファベットのように思い切ったデザインのフォントなら...なのですが、膨大な日本語データをそうそう画期的なデザインにもできませんよねぇ。

ならば、背景を夏らしくしようか?と思い立って模様替え。
せっかくなのでちょっといじっていたら...夜中になってしまったけど。
うーん、色替えたり、透過させたり、角丸くしたり、こっちの方が変わり映えしますね!

まだ完全ではありませんが、スマホでもそれなりには見ることができます。
大きなタイトル画像はスキップしてさっさと本題に入れるように(?)なっています。
スマホをご利用の方、どうぞご覧になってくださいね!

   
ラブリーうさぎのアクセサリー・Beads*usa-shopへようこそ

[PR]
by usa-log | 2012-07-25 00:11 | デザインやなんかのこと | Comments(0)

上から目線。

Macを買い替えたら、画面の位置が高くなって目線が変わってしまったもよう。
そのままにしておいたら首凝りが〜〜。

今のデスクは花柄Macの当時だから、もう10年も前。
高さの調節できるものを選んだのだけど(椅子の高さを合わせればよかったのですが、椅子が気に入っていたので)、120cm幅の机をひっくり返して4本の足をいじるのはけっこう面倒で...そのままになってました。
金属製のパイプみたいな足で、目一杯ガショーン!と引っ張ってから好みの高さにガシャッとなるヤツ。
そのやり方もすっかり忘れてしまった上にマニュアルも行方知れず。

結局冷蔵庫の背面大掃除に続く半日仕事になってしまいました。
足を固定するネジネジもかなり緩んでいたし。(去年締め直したはずなのに...まさか地震のせい?)
ホコリも取れたし、まぁいっか。
やっとこさ、デスクの高さ調節が完了。
a0026762_16155665.jpg

パソコンの画面というのはやや上から見下ろす感じの目線の方が疲れないそうです。
距離的にも40~50cmをキープできてるようだし。

なんか急に楽になったなー。
こんな些細(じゃないのね)なことで、こんなに変わるものなのですね。

そもそも家具の規格って平均的成人男子のサイズでしょ?
そりゃ合う訳ないわ...。
デスクが固定なら椅子の高さを変えてみる、足が届かない高さになったら足台(箱でよい)をセットすればOK 。
肩こり、首凝り、眼精疲労の方はお試しになるといいかも。


そういえば昔、パソコン置く所が傾斜して凹んだ形のデスクあったよね〜。今もあるのかな?
[PR]
by usa-log | 2011-08-02 16:54 | デザインやなんかのこと | Comments(0)

進化。

前回言い足りなかった分を。

CS5はすごい、たぶん。(まだ使ってない機能が多すぎるのでわからない)
そもそもPhotoshopがやたら使いやすい。これは間違いないです。
3.0とかそんな頃からのユーザーだけど、バージョンアップのたびに「使いにくくなったー」と文句言ってきたと思う。
もちろん、それは慣れてないから。人間は慣れないものを目にするたびに戸惑う。
それがうまく理解できなかったり、すぐに使えなかったりすると相手(物)のせいにする(笑)

でもちょっと根気よく慣れる努力をしてみると、なるほど〜と感心する場合が多い。
ただそれとは別に、自分にはここまでの機能ななくていいな、その分もっとリーズナブルなのがあればいいのにって思う。
正直Photoshop5.5(CSじゃなくて10年前の)で、ぜんぜんOK。それがOS10.6で動けば何の問題もないのだ。(Elementsなどの機能制限があるものではなく、たとえ旧バージョンでもフルに使えるという意味です)

このまま進化を続けたらどうなっちゃうんだろう?っていう心配もある。
それこそハイエンドの人々にしか手が届かないものになってしまったら...?
フリーソフトのGIMPを試したのもそのせい。イザという時に代替えになるものを手に入れておかないと心配じゃないですか。

でも開発する側としては、続けるしかないでしょう。ないよね?
いったい進化ってなんだろうって考えてしまう。
新しいものを得る喜びと古いものをなくす残念な気持ち。
高価な品だったのに、あっという間に新しい物の方が遥かに安くてしかも高機能になってしまうという、なんともやりきれないあの感じ。
でも新しいもの作らなくちゃ、企画も開発も営業も販売もみーんなお仕事なくなってしまうんだよね。
そうやってみんなして走り続けていかないと生きていけないのかなぁ。
いろんなところでいろんな形で無理とか無茶が露呈している今日このごろでしょう?
せめて進化の速度を遅くすることは?


いっそホビット庄のような村でのんびりと花や小鳥に囲まれて暮らせたら...なーんて思ってしまったら、それはただのセンチメンタルにしかならないし。
[PR]
by usa-log | 2011-05-16 14:49 | デザインやなんかのこと | Comments(3)

でもやっぱり偉い、Photoshop。

英語版だの使ってしのいでいた頃、GIMPも一時期試してみた。
これはphotoshopとほぼ同じことが「無料」でできてしまうという素晴らしいソフト。

同じ写真からWEB用に保存して試してみたけど、見た目はまったく変わらない。
a0026762_12145454.jpg
photoshop(18,904KB)
a0026762_1215327.jpg
GIMP(20,359KB)
わずかに画像サイズが違うけど、普通に開くのに差が出るようなものじゃないし...。

じゃ、なんでわざわざ高いの買ったの、ってことになるのだけど。
これはもう慣れというか、同じことをするための手順が変わることでどうにもこうにも作業が進まないからなのです。まるでやっかいなクイズみたいなことになって、いっこうに仕事がはかどらないという。。
実際、使ってみたという人に聞いても、「難しい」「めげた」「投げた」という意見が。

それがPhotoshopインストールした途端、ガラっと変わったはずのインターフェースだろうが、できないはずの英語だろうが、わかっちゃうから不思議。手の方が勝手に動く。
だいたいそんなもんでしょ、とかそこら辺にあるでしょ、っていうのがことごとく当たる。

弘法大師は筆を選ばなくても、うちゃおーレベルは無理しても選ばないとダメってことみたいです。
まぁ言い訳すれば、もう10数年も使い慣れてるものを替えるのは難しいっていうのもある。

でも慣れの問題だけで片付けるのもちょっとねぇ。
やっぱり世の中って先人の知恵や努力から開発された技術の上に成り立っているんだわ、っていうその気持ちは忘れちゃいけないと思うので。
それはほんとに何から何までそうなんだなぁ、って。
そしていずれは、こちらが今度は伝える側にならなくちゃいけないんだよね。
...そんな日が来るかどうかはわからないけど。
[PR]
by usa-log | 2011-05-16 12:44 | デザインやなんかのこと | Comments(0)