カテゴリー: Webデザイン

iOSシミュレータの見栄えがショボくなった時の対処法

iOSシミュレータがショボくなった(; ゚д゚) 今日、iOSシミュレータを使ってスマホサイトのデバッグをしていたら…。 急に見栄えがショボくなった。 (早急に解決方法だけ知りたい方はどんどんスクロールされたし。) ん?何がどう違うの?と思った方の為に、元のお姿も載せておく。 これ↓が、 こう↓なった(; ゚д゚) デバイスの外枠(?)がiPhoneそのものだったのが、急にブラウザ枠みたいになってしまった。 これではスクリーンショットを撮っても様にならない。 何よりデバッグのモチベーションが下がる。オシャレじゃない。テンションがさがr(ry こうなってしまった心当たりとしては、「Command⌘ + 3」を押した時になった気がした。 この「Command⌘ + 3」は、後から分かったのだが、表示倍...

background-sizeが効かない?!指定する時に注意すべきこと

Retina対応時に便利なプロパティ、background-size Retinaディスプレイに対応するために、画像のサイズを1/2に指定したい時がある。 img指定している時はzoom:0.5などを指定すればOKだが、背景に指定している時は、background-sizeでサイズを調整する。 background-sizeの指定方法 background-sizeプロパティは横幅と高さの2つを指定する。 例えば、200px*40pxの背景画像を半分のサイズにしたい場合はこうだ。 [css]background-size:100px 20px;[/css] その他にも、パーセンテージで指定することなども可能。指定方法はこちら。background-size-CSS3リファレンス background-sizeが効か...

Webデザインに役立つ「iPhone GUI PSD」と「Browser Form Elements PSD」

無料で使えるデザインテンプレートPSD Webデザインをしているときに、いちいちラジオボタンやフォーム系のあしらいをするのが面倒だ。装飾を施すならいちいち作ってもいいかもしれないが、ラジオボタンなどはどれも同じもので良い。どこかからスクリーンショットをとってきてペタリ、というのも簡略化したい。そんな時に役立つのが、パーツを集めたPSDだ。 iPhone用のデザインテンプレートもある。こちらはスマホ用のデザインをつくる時にも、大幅に作業時間を短縮できそうだ。Retina版が用意されているのも嬉しい。 iPhone GUI PSD [browsershot url="http://www.teehanlax.com/blog/iphone-gui-psd-update-13/" width="545"] Download P...

Webデザイナー必見!神戸市がサイトデザインを公募中

神戸市民でなくても参加可能! 兵庫県神戸市が、ホームページのトップページデザインを公募しています。自分の作ったサイトが、公的に使われるなんてなかなかすごい事ですよね。 神戸市:神戸市ホームページリニューアル トップページデザイン募集 応募資格はWebデザイン+ディレクション出来る人なら誰でも可能!住んでいる場所による制約もありません。(実際にディレクションするとなると、現地に趣く事もあると思いますけどね) ページデザインからデザインディレクション業務までを遂行することが可能な個人・団体 締め切りは4月26日までですが、今からならまだ間に合…いますよね?w 制作費用は1,000,000円(税込み)です。ひゃくまんえん。高いととるか、安いととるか…。 尚、現在のトップページはこんな感じ。 [browsersho...

Google Chromeに標準装備されているUser Agent切り替え機能が便利

エクステンション不要!Chrome標準搭載のUA切り替え機能です 最近使ってみて、改めて便利だなーと思ったのでまとめてみました。Chromeにデフォルトでついている機能なのですが、目立たないというか気づきにくいというか…。 こんな時に便利! 去年末にリリースされた「LINEで送る」機能。 設置方法|LINEで送るボタン [browsershot url="http://media.line.naver.jp/howto/ja/" width="400"] このボタンが少し特殊で、「ツイート」ボタンや「いいね!」ボタンとは違い、スマホでのみ意味を成すボタンなのです。PC上でボタンを押してもLINE公式サイトへリンクしているだけで、たとえPC版のLINEアプリを入れていてもLINEで送る事はできません。しかも、PC版では表示されな...

デザイナー必見!誰もが見分けやすく美しい色の選び方「色のユニバーサルデザイン」

色のユニバーサルデザイン-Color Universal Design- 色覚障害者でも分かるようにデザインする Webデザイナー、DTPデザイナーのみなさんには耳にタコかと思います。 私もそうです。 ただ、なんとなく赤や緑の配色に気をつけてはみるものの、本当にそれで解決しているのか確信はありませんでした。 そこで、遅ればせながら「色のユニバーサルデザイン」を手に取り、改めて勉強してみようと思ったわけです。 ちなみに、本書は表紙にもある通り、「色彩検定関連書」であります。 私自身「色彩検定2級」を取得していますが、前半の1/3は復習程度に読み流せる内容になっています。 ((大判のフルカラーだし、例示が豊富なので、短時間で読めました。)) (目の仕組みや、色の見え方、色の三属性などです。) デザインをする時に気...

字詰めの勉強をしたいと思った時に買った本+無料ブラウザゲームで実践!

字詰め
簡単なようで奥深い! Webデザインの場合、デザイン制作の時しか字詰めを気にしないですよね。(テキストの大半はブラウザで表示するので、各ブラウザごとにフォントが違ったり、brタグで指定していない長文の改行位置を調節出来ないので、画像で作るものしか字詰めを気にしていませんでした…。) それも、これまで特別ハードに勉強したり習得した覚えがなく、感覚的にこなしていました。 ところが、DTPですよ、DTP。 紙媒体の場合、すべてのテキストに気を使う必要が出てきます。 Webデザインと違って、 文章の折り返し位置(単語が途切れないような字送りなど) ブロックごとの両端のあしらい(Webだとmarginやpaddingで左右均等に余白をとって終わりでしたが…。) なんかも気にしないといけませんね。 かといって「字詰め」を勉強...