iPhone用にサイトの幅と画面の幅を合わせるには
iPhoneやスマートフォンでサイトを表示させると文字が非常に小さく表示されてしまいます。そこで、画面にぴったり合わせて表示させてみましょう。 HOME About this site Mail 最終更新日 2015-10-28 0:41 WordPressなどのように動的に出力するサイトであれば、スマホでアクセスすると、スマホ用の表示を出力してくれます。が、私のように自作ブログや、MovableTypeや、企業サイトなど静的なページで作成したサイトで、スマホ用やパソコン用に表示させるにはどうしたら良いのでしょうか？ Sponsored Link このページの目次 iPhone6 ディスプレイの解像度は？ スマホ用サイトの横幅は320 viewportで横幅ピッタリ パソコンではどう表示されるか viewportの幅の指定 一覧表 画像やテーブルがはみ出てしまう場合の対策 スマホサイトの幅
UXデザインの基礎知識と参考になる記事5選
UXデザインは重要とよく聞くけれど、具体的になにをすればいいのかわからない…という方は多いのではないでしょうか。もしUXデザインの本当の意味を誤解していたり、軽視してサービスをデザインしていたりすると、理想的な効果をあげられないどころか、むしろ悪評が広まってしまうなんてこともありえます。 UXデザインを理解するためには「UXデザインにはどんな定義があり、どんなものを指すのか」を知らなければなりません。そこで今回は、UXデザインを学びたい方のために基礎知識と参考になる記事をまとめました。UIとUXの違いやUXデザインをするためのポイントを解説していますので、UXデザインの学習の参考に活用していただければ幸いです。 UXデザインの基礎知識 まずはUXについての理解を深めましょう。 UIとUXの違い UX を語る上でまず外せない問題が、UIとUXを混同している方が多いことです。UI / UXと表
デザインは理屈で学べる！ エンジニア向けデザインメンター業が求められる理由について聞いた | HRナビ by リクルート
アイデアは面白いのに、どうもダサかったり、UIがわかりにくかったりするWebサービスに出会ったことはないだろうか。 それはもしかすると、デザインを知らないエンジニアが、ふわっとした感覚と印象で作っているからなのかもしれない。そんなエンジニアでも、デザインのセンスを身につけることはできるのだろうか？ プログラマー向けにデザインを教える“デザインメンター”赤塚妙子さんに話を聞いた。 プログラミングを学んだデザイナーが始めた“デザインメンター業“ 今年の1月から“デザインメンター業”を始めたフリーランス デザイナーの赤塚妙子さん。美大を卒業後、デザイン事務所に就職。その後、Webの世界へ足を踏み入れ、今ではRuby on Railsの開発に参加するまでになった。 「自分がプログラミングを覚える中で、デザイナーとプログラマーが歩み寄る感じが面白くって。デザイナーがプログラミングを覚えることはあるけ
WebエンジニアのためのWebサービスデザイン実践講座
DeNA 社内勉強会に呼んでいただいて、お話させていただきました。 Reviewに登場していただいてるサービスはこちらです。 動く小説投稿サイト Denkinovel by @katryo さん http://denkinovel.com/ ご協力ありがとうございました( ˘ω˘)
simple_formとTwitter bootstrapで作る俺流鉄板Railsアプリ（その１） | Oh My Enter!
エンジニアであれば、みな自分流の開発流儀をお持ちだと思います。PHPでWebアプリを開発する際はこのフレームワークを使うだとか、Railsアプリの場合はこのgemを使用するだとか・・・。私がRailsアプリを作成する際の鉄板といえば、simple_form＋twiter bootstrapを使用することです。simple_formは、入力フォームを簡単に作成するお手伝いをしてくれるView用のgem、twitter bootstrapは（説明するまでもないかもしれませんが）Twitterが公開しているcssフレームワークです。デザインが苦手なエンジニアにでも、それなりに見栄えの良い画面が簡単に作れるので、非常に重宝しています。 simple_form: https://github.com/plataformatec/simple_form twitter bootstrap: http:
デザインの7か条『誰のためのデザイン？ 認知科学者のデザイン原論』 - RyoAnna
USBメモリをパソコンに挿すと引っかかる事がある。コネクタの半分が空洞、半分が突起になっているため、2分の1の確率で引っかかる。これは、マークやランプを上に向けて挿さないユーザーが悪いのだろうか。『誰のためのデザイン？ 認知科学者のデザイン原論』の著書ノーマンは、このような事例をデザイナーの問題だと主張する。 ノーマンによるデザインの7か条。 外界にある知識と頭の中にある知識の両者を利用する。 作業の構造を単純化する。 対象を目に見えるようにして、実行のへだたりと評価のへだたりに橋をかける。 対応づけを正しくする。 自然の制約や人工的な制約などの力を活用する。 エラーに備えたデザインをする。 以上のすべてがうまくいかないときには標準化をする。 例えば、4番の「対応づけ」の悪い例は、部屋の電灯スイッチ。一般的なスイッチは縦と横に4つ並んでいるが、実際の電灯の配置とは一致していないため、どこを
ペーパープロトタイピング入門 – 第1回 どうして紙でプロトを作るのか | fladdict
ペーパープロトタイピング講座シリーズ。第1回は導入編。 第1回はの導入編。ペーパー・プロトタイピングとは何なのか、何故必要なのか。そして導入することで、どんな利点があるのかを説明する。 ペーパー・プロトタイピングって何？ ペーパー・プロトタイピングとは、紙で実際にアプリやサイトを「実装する」ことである。 通常の開発においてコンテンツが使いやすいかどうかは、開発が終盤になるまでわからない。このため「作ってはみたが使いにくい」や「いまさら後戻りできない」という問題が発生する。UIや手触りが重要なモバイル系のアプリにおいて、これは致命的な問題になる。ペーパープロトタイピングはこの問題を低コストで解決する。 紙とペンで動作モックを作成することで、本実装を行う前に、素早く手戻なく検証を行うことができる。これにより、仕様書策定や実装前にPDCAのサイクルを実現できる。作業負荷の高い本実装を行う前に軽く
実際のサイト上で動作するチュートリアルが簡単に作れるIntro.jsが便利すぎる件 - (ﾟ∀ﾟ)o彡 sasata299's blog
2013年05月08日18:21 JavaScript 実際のサイト上で動作するチュートリアルが簡単に作れるIntro.jsが便利すぎる件 さて、先日簡単なチュートリアル作ろうと思ったんですが、どうやるのが良いのかなーと思って悩んでました。キャプチャ取ってそこに説明文を書いて…ってしてもいいんですけど、キャプチャだと一部分なのでサイト上のどの辺なのかわかりにくかったり、サイト側は変更したのにキャプチャが古いままとかになったりしちゃいますよね＞＜ とか思って探してみたらこちらの Intro.js が便利だったので紹介してみます。 さて、この Intro.js を使うとですね、サイト上で動作するチュートリアルを簡単に作れるんですよ。使い方も簡単で、動作させたい要素に対して data-intro (表示する説明文) と data-step (チュートリアルの何番目に表示するか) を指定します。チ
UI/UX設計の教科書、About Face 3輪講の資料を公開します - ninjinkun's diary
一昨年に社内で行ったAbout Face 3輪講の資料を公開します。実は今までずっと公開されていたのですが、存在を知られていなかったので、改めて周知します。 About Face 3はUI/UX設計の教科書で、ユーザーストーリーやペルソナなど、基本的な内容が押さえられています。ディレクター、デザイナー、エンジニア、サポート等、プロダクト制作に関わる全員の共通知識として使える内容だと思います。 About Face 3輪講概要 1. ゴールダイレクテッドデザイン 2. 実装モデルと脳内モデル 3. 初心者、上級者、中級者 5. ユーザーのモデリング : ペルソナとゴール 6. デザインの基礎 : シナリオと要求 8. 優れたデザインの総合 : 原則とパターン 10. オーケストレーションとフロー 11. 間接的な操作を取り除く 12. 良き振る舞いのデザイン 13. メタファ、イディオム、ア
「第一回 プログラマ向けデザイン勉強会」の内容を参考にして妻のパン屋のWebサイトをリニューアルしてみた - give IT a try
はじめに みなさん、明けましておめでとうございます！・・・と言うにはあまりにも遅すぎる時期になって2013年最初のブログ更新となりました。 「そろそろブログ書かなきゃ書かなきゃ〜！」と思っていたのですが、年末から妻のパン屋のWebサイトのリニューアルに没頭してしまい、間が空いてしまいました。 せっかくなので、2013年最初のエントリではそのお話をしたいと思います。 「第一回 プログラマ向けデザイン勉強会」の発表資料が素晴らしい！ 前々から妻からは「Webサイトのデザインをリニューアルしてほしい」と言われていたのですが、僕自身はあまりデザイン方面には強くないプログラマなので、どうしようかと困っていました。 そんなとき、ネットで見つけたのが「第一回 プログラマ向けデザイン勉強会」でした。 東京の勉強会なので、僕は参加できませんでしたが、発表者の方々のわかりやすいスライドが公開されていたので、だ
これくらいはやってほしいWebデザイン
PHPカンファレンス2012@東京 ( http://www.ustream.tv/recorded/25414614 )
クックパッド 片山育美さん／UIデザイナーとしてユーザーが幸せになるものだけを作りたい【連載：ワーキングビューティー・アルバム Vol.11】 - Woman type[ウーマンタイプ] | 女の転職type
クックパッド株式会社 サービスデザイン部 UIデザイナー 片山 育美さん 美大で情報デザインを専攻し卒業。2011年に新卒でエンジニアとしてクックパッドに入社。同年8月よりUIデザイナーとして活躍。 今回紹介するワーキングビューティーは、株式会社クックパッドのUIデザイナー、片山育美さん。入社２年目にして新規事業の『やさい便』をはじめ、数多くのサービス開発に携わっている彼女。あまり聞きなれないUIデザイナーの仕事内容から、揺らがない仕事軸、そして根っからのエンジニア魂を感じられるプライベートに迫る！ 入社当初はまったく知らなかった 「UIデザイナー」の仕事 編集部：いまのお仕事は「UIデザイナー」ということですが、どのようなお仕事なのですか？ UIとは「User Interface（ユーザーインターフェース）」の略で、仕事を簡単に説明すると、ユーザーがインターネットサイトの画面を使いやすく
![クックパッド 片山育美さん／UIデザイナーとしてユーザーが幸せになるものだけを作りたい【連載：ワーキングビューティー・アルバム Vol.11】 - Woman type[ウーマンタイプ] | 女の転職type](https://cdn-ak-scissors.b.st-hatena.com/image/square/b3798275ce15fec93611078875ad1c8415db2c05/height=288;version=1;width=512/https%3A%2F%2Fwoman-type.jp%2Fwt%2Ffeature%2Fwp-content%2Fuploads%2F2016%2F01%2Fog11.gif)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
TECH PROjin
https://qiita.com/monja415/items/4895040a920ef8b4c84c
ククパド美ちゃんと学ぶ！クックパッドのUI改善プロセス：前編 // Speaker Deck
ククパド美ちゃんと学ぶ！クックパッドのUI改善プロセス：後編 // Speaker Deck
勘違いだらけのAndroid UIデザイン
エンジニアのためのUX入門
エンジニアtype 技術者のキャリアを考えるWebマガジン - 転職＠type
