タグ

デザインに関するmktakuyaxのブックマーク (11)

  • Google のロゴが新しくなりました

    メディア関係者向けお問い合わせ先 メールでのお問い合わせ: pr-jp@google.com メディア関係者以外からのお問い合わせにはお答えいたしかねます。 その他すべてのお問い合わせにつきましては、ヘルプセンターをご覧ください。

    Google のロゴが新しくなりました
  • [CSS]要素を横並びに配置できる display:table-cell の基本的な使い方と注意点|CSS|WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」

    display:table-cell は以下のような使い方をします。 /*CSSの記述*/ <style> ul.nav { display:table; } ul.nav li{ display:table-cell; vertical-align:middle; text-align:center; } </style> /*HTMLの記述*/ <ul class="nav"> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> <li>リスト4</li> </ul> 親要素に display:table を指定し、テーブル扱いとする display:table-cell は display:table とセットで使う事が多いです。 親要素(ul.nav)に display:table を指定することで「表(<table>)」の扱いになりますので、子要素

    [CSS]要素を横並びに配置できる display:table-cell の基本的な使い方と注意点|CSS|WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」
  • ウェブデザインをはじめるあなたへ - ウェブ雑記

    ウェブデザインについてまったくわからない頃によく見て勉強してた資料群です。+いくつかの自分で作った資料 SlideShare 色彩センスのいらない配色講座 色相、明度、彩度で色を説明できるようになる。 ベースカラー、メインカラー、アクセントカラーで配色を説明できるようになる。 その上で、あまり間違いのない色の選び方がわかるようになる。 ノンデザイナーのための配色理論 最後に紹介されているこのツールがベースカラー、メインカラー、アクセントカラーを決める上で便利。 ウェブサービスの企画とデザイン 僭越ながら明治学院大学で講義した時に作った資料。 なんとなくウェブサービスを作るときの流れとか感じてもらえたら幸いです。 かんたんキレイなウェブデザイン 僭越ながら勉強会 (UT Startup Gym) 用に作った資料。 なんとなく CSS フレームワーク、グリッドシステム、レスポンシブデザイン、ウ

    ウェブデザインをはじめるあなたへ - ウェブ雑記
  • BootStrapに標準装備されてるのについつい再実装しがちな機能とかまとめ。 - NOT SO BAD

    (photo credit: Nathan O’Nions via photopin cc) 最近あらためてBootstrapにはまってます。 Bootstrapでサイト作ってる時に標準の機能を知らんくて わざわざ同じ機能を自分でcss書いたりしてることが多かったので、 よく再実装しがちな機能をまとめメモ。 3.0でフラットデザインになって、いわゆるbootstrap臭もだいぶ薄れた気がするけどどうなんやろ。。 3.0つかったサイトが増えたらまた臭ってきそうな気もするけど。 ドキュメント 知らずに再実装しちゃう系の便利機能はCSSのHelper Classesとかに多い。 ので最初にひととおりドキュメント見とくのはいいですね。 当たり前やろって話やけど。。 Bootstrap「Helper Classestext-align 単純に中央揃えとか左揃えとかだけを指定するために

  • 厄介な問題を解決したい? ではトーストの作り方を説明してください

    Tom Wujec / 青木靖 訳 2013年6月 (TEDGlobal 2013) 何年か前に、複雑な問題を理解し解決する力を付けるための、シンプルなデザイン練習課題に出会いました。多くのデザイン練習課題と同様、一見すると自明な問題に見えますが、良く検討してみると、私たちが協力したり物事を理解する方法について意外な真実を教えてくれるのが分かります。この問題は3つの部分からなっていて、誰でもやり方を知っていることから始めます。トーストの作り方です。 まず真っ白な紙とサインペンを用意して、言葉は一切使わずにトーストの作り方を絵にしてもらいます。多くの人はこんな絵を描きます。パンの塊があって、それをスライスし、トースターに入れ、しばらく待つとパンが飛び出して、ハイできあがり! 2分後にはトーストと幸せを手にします。 私は何年もかけてこのようなトーストの絵を何百も集めてきましたが、中にはとても

    厄介な問題を解決したい? ではトーストの作り方を説明してください
  • 言葉からウェブデザインを始めよう(翻訳) | Elle Kasai

    元の記事はJustin Jackson氏が書いたこちらの記事だ。原文はとてもシンプルなページに載せられていることがわかるだろう。一度ご覧になってから下記の和訳を読み進めることをおすすめする。 これはウェブページです。 たいしたページではありません。 あるのは言葉だけ。 それをあなたは読んでいます。 オシャレなデザインや、レスポンシブなレイアウト、魔法のようなスクリプトに私たちは魅了されてしまいました。 でも、ウェブで一番強力な道具は、今も昔も言葉です。 私が書いた言葉を、あなたが読んでいる。これこそ魔法です。 私はブリティッシュコロンビア州の小さな都市にいますが、あなたは別のどこかにいることでしょう。私は2013年6月20日の早朝にこれを書きましたが、あなたは違う日時にこれを読んでいることでしょう。私はノートパソコンでこれを書きましたが、あなたは携帯電話でこれを読んでいるかもしれないし、

  • 【予想外】斜め上をいく文の里商店街のポスター52点

    大阪市阿倍野区にある「文の里(ふみのさと)商店街」では、最近シャッターを下ろした店が目立つようになってきました。 そこで、商店街の活気を取り戻そうと大阪商工会議所が、商店街のPRポスター約200点を、電通関西支社に依頼して制作しました。制作したのは電通関西支社の若手クリエーター60人。そこで制作されたポスターが斜め上をいっていて素敵でしたのでご紹介します。(当は全部センスがあって紹介したいのですが、今回は特に気になったポスターをご紹介します) 大嶋漬物店 ポスター? はよ作ってや。死ぬで。 やっと気付いた。この仕事、しんどい。 お漬かれさまでした。という文字までこだわっています。すごい。 鳥藤商店 いいムネあります。 いいモモあります。 浜口鮮魚店 おめで鯛!があるならメリークリス鱒!てのはどやろ。 これ、スズキ。僕、ハマグチ。 アンティーク着物 姉妹屋 その着物 かわいいやん かわいい

    【予想外】斜め上をいく文の里商店街のポスター52点
  • 洗練されたデザインが話題のドライクリーニング店

  • 君は蛇口がまだ進化できるって思ったことはあるかい?

    僕はノーです。そんなこと考えたこともありませんでした。でも蛇口、進化しました。dysonの手によって。 五つ星ホテルのバスルームにあるような、近未来なものはあれど、蛇口の基的デザインは長らく変わっていません。それで言うとトイレにあるハンドドライヤも同じ。駅やオフィスなどのトイレで用を足したあと、手を洗いますよね。そして濡れた手で通勤カバンを持って、ハンドドライヤまでの微妙な距離を移動して、ちょっと濡れてしまったカバンを足に挟み、やっとのことハンドドライヤでヴイン。 今まで疑問すら持ったことのなかったこのステップに目をつけたのがジェームズ・ダイソン氏。 そう、蛇口とドライヤをくっつけてしまったのです。 この「Dyson Airblade Tap hand dryer」にはAirbladeテクノロジーと、最新のダイソンデジタルモーターV4(DDM V4)が搭載されていて、時速690kmの空気

  • xchema - 素のHTMLタグを活かしたシンプルなデザインフレームワーク MOONGIFT

    これはこれで使い道がありそう。 BootstrapでWebサイトを組む機会が増えているのですが、バージョン3になってから徐々に作法が増えてきたように感じます。機能が増えるということはそれだけ覚えるべきことが増えるということです。 そうなるとシンプルに作れるという利点からはちょっと外れてくるかも知れません。そこでほぼ素のタグのままデザインができてしまうデザインテンプレートxchemaを紹介します。 各コンポーネントごとにたくさんのスクリーンショットでお届けします。 フォントの装飾。特にクラス指定がない所が特徴です。 段落。行間が良いですね。 頭だけ大きく。英語では良くある表現ですね。 引用。カラーリングに対応しているのが新しいかも。 リスト。様々な形式が用意されています。 定義リストに対応しているのが嬉しい。 アドレス。こちらもシンプルです。 アラート。alertというタグを作っています。

    xchema - 素のHTMLタグを活かしたシンプルなデザインフレームワーク MOONGIFT
  • 富士通らくらくホンに見る高齢者に使いやすいUIのあり方 - A Successful Failure

    2013年10月02日 富士通らくらくホンに見る高齢者に使いやすいUIのあり方 Tweet 高齢者にも使いやすい携帯電話といえば、富士通のらくらくホンシリーズが有名だが、総務省のICT超高齢社会構想会議の第4回WGにて、富士通研究所の石垣一司氏が高齢者のICT活用について 富士通(研究所)の取組ご紹介と題し、同社の取り組みの紹介を行っている。 非常に示唆に富んだ良い資料であるので、エントリでは同資料を引用して、高齢者に使いやすいUIの勘所について考えてみたい。エントリ内の図表は同資料からの引用である。 加齢に伴う身体機能の低下 加齢に伴い身体能力が低下することは誰もが体感することだが、具体的には次のような形として現れる(高齢者にとってのユーザビリティ)。 視覚機能の低下 老眼による近視力の低下 暗順応の低下 視野の狭まり 短い波長の色(青、緑)の感度低下 聴覚機能の低下 高い周波数帯の

  • 1