タグ

2014年7月2日のブックマーク (3件)

  • スマホUI考(番外編) 顧客やユーザーの要望に全て対応すると、アプリは99%破綻する | fladdict

    顧客や上司、ユーザーの場当たりな要望に対応しつづけると、どんなアプリもゴミアプリになる。たとえそれが理にかなった要望であっても。 なぜなら面積の限られたスマホでは「一画面の機能数とボタン数」が、使い易さと品質に深くリンクしているからです。 ということを、エラい人にプレゼンするのがお仕事の今日この頃。でも毎回毎回、同じことを説明するのがシンドイので資料をブログにまとめたいなぁと思うなど。 思考実験として、ここでは架空事例としてTwitterアプリを例に考えてみる。 何かの間違いで、日の大手メーカーがTwitterを買収すると・・・UIデザイナーが体を張らないと99%ぐらいの確率でこうなるのです。 ここがオリジナル Request1: ダイレクトメッセージをトップ階層に ユーザーからの真っ当な要望。実際にはサービスの質ではないのですが、要望はかなり多いはず。 ただTwitter社的にはme

  • [CSS]背景画像をブラウザいっぱいに表示するシンプルな最新テクニック

    背景画像をブラウザいっぱいに表示するスタイルシートのシンプルなテクニックを紹介します。 デスクトップだけでなく、スマフォやタブレットにも対応、しかもたった一行なのでスニペットに加えておくと便利です。 デモを幅480pxで表示 コンセプト 「background-size」をビューポート全体をカバーするために使う 「background-size」はレスポンシブ対応にする時に非常に有効なプロパティです。値に「cover」を使うことで、背景画像を相対的に自動で調整します。 ※IE8以下はサポートしていませんが、後述のスクリプトを使用するとbackground-sizeが機能するようになります。 「Media Queries」をスマフォ対策として使う スマフォなどの小さいサイズのスクリーン用にMedia Queriesを使って、小さいサイズの画像ファイルを使うことができます。もっともこれはオプシ

  • Photoshopでジグソーパズル風のデザインを作る方法 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    こんにちは。デザイナーの白浜です。 今回はお好きな写真をジグソーパズル風にする方法をご紹介したいと思います。 1. ジグソーパズルの型を準備する 今回はこちらの素材を使用させていただきました。 参考:ジグソーパズルイラスト素材01 | イラスト 無料の素材ライブラリー.com ピース1つ1つが選択できるようになっているので、とても使いやすかったです! 2. DLしたベクターデータをPhotoshopに取り込む まずはじめに、Photoshopで長方形を描きます。 次にIllustratorを開いて、先ほどダウンロードしたパズルのオブジェクトをすべて選択→「コピー」しておきます。 Photoshopに戻って長方形を書いたレイヤーに先ほどIllustratorでコピーしたパズルのデータをペーストします。 その際、「パス」を選択して貼り付けてください。 長方形ツールがパズルの形に型抜きされました

    Photoshopでジグソーパズル風のデザインを作る方法 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作