※この記事は、2015年4月15日に公開された記事を再編集したものです。 世の中には、物事を美しく魅せるための「比率」が存在します。 建築や、Webデザイン、通常のデザインなど「なんだか綺麗」と思わせなけらばいけない場面で利用されるこれらの比率。具体的には黄金比、白銀比、青銅比、白金比、第二黄金比など、利用される比率は複数存在します。 そこで今回は、その中でもよく使われる黄金比・白銀比を簡単に、自動で計算してくれる便利なサービスを5つ選んでみました。 黄金比とは 黄金比とは、「Golden Ratio」の日本語訳で、1：1.618という人間にとって最も安定し、美しく感じられる比率のことです。 正方形の一辺にその約60％分の長方形を足した時、自然とバランスが取れていると感じることができます。名刺などの縦横比もほぼ黄金比で構成されており、有名なものをあげると、パルテノン神殿、モナ・リザ、ミロの

Chrisはロンドン在住のフリーランスのUXデザイナーです。彼はシャーピー（油性ペンが有名なメーカー）、コーヒー、プロトタイプ、付箋紙を愛しています。彼はブログやポートフォリオのウェブサイト、Just UX Designの中で色々な思いを書き綴っています。 検索はWebデザインの重要な要素であるにもかかわらず、ユーザビリティが悪いことがよくあります。このような使いにくい検索が及ぼす影響を認識することで、経済的な損失を防ぐことができるでしょう。 お客様が実際に店舗へ出向いたとき、スタッフが把握していない商品について尋ねたとしましょう。スタッフは肩をすくめて、商品がないことに関して謝罪するだけでしょう（もしくはそれすらしないかもしれません）。お客様はその店舗に不満を抱き、代わりに近くにある競合店舗へ向かうでしょう。 あなたがこの架空のビジネスのオーナーだとしたら、こんな対応をするスタッフには嫌

ずっとHerokuを使っているのでAWSといえば使うのはS3かRoute53くらい。 今回、AWSを使ってワードプレスのウェブサイトをつくることになったのですが、勉強になったので残しておこうかと。 なお、知っている人には当たり前の内容になっております。 基本を知ろう Amazon Web Services入門 (全17回) - プログラミングならドットインストール このレッスンがめちゃくちゃ分かりやすかったです。 EC2 + RDS + S3… ふんふん で LoadBalancerね、なるほど便利だねってなんとなく作業してたんですが、ふと立ち止まって思いました。 これっておいくらですか…？ アカウントさえ持ってればさくさくとサービスを追加できるので、AWSってあんまり料金を意識しないんですが来月びっくりすることになるのかも…。負荷が高くないのに至れり尽くせりにする必要もないのかと。 ため

Chrome DevToolsを使いこなそう！ Web開発に必須なブラウザ開発ツールによるデバッグの基本 開発者ツール（DevTools）とは、ブラウザに搭載されているデバッグツールです。多岐にわたる技術の集合体であるWebページやWebアプリケーション、いわゆるフロントエンドの開発において、なくてはならないツールです。 皆さん、どうもこんにちは。今回で3度目のエンジニアHubの登場となる大竹智也です。春の季節もそろそろ終わりを迎え、新生活を迎えた人たちも新たな環境に慣れてくる時期だと思いますが、元気にお過しでしょうか。 前回までエディタの話ばかりしてきましたが、今回はエディタから離れてWebブラウザ（以下、ブラウザ）の話をしたいと思います。ただ、ブラウザの話といっても、エンジニアHubは開発者向けの媒体なので、ブラウザに搭載されている開発者ツール（Developer Tools）のお話を

WebマーケターTOMOKO 新規顧客獲得を専門とし、企業の価値や個性を広めていくために日々奮闘中。 Google公認プロフェッショナル認定　Adwords初級・上級認定、Analytics認定 ご相談・メディア掲載依頼等はこちらから→ Google +　｜　Twitter ＜質問＞ スマートフォンが流行っていますが、自社のWEBサイトではまだスマホ対応していません。 スマホ対応すべきでしょうか。またスマホ対応するとしたら、どのように考えるべきでしょうか。 ＜回答＞ スマートフォン（以下スマホ）の普及やグーグルの動向を考えると、遅かれ早かれ対応したほうが良いでしょう。 ただし、スマホ対応と一言で書いても、いくつかの手段があります。 あなたのWEBサイトの目的や使用用途・運営状況などに応じて、あなたにとっての最適な手段は変わります。今日はそれを考えてみましょう。 スマホ利用の現状 年々増える

電脳レストハウス梅ちゃん堂は終了しました。

用語解説 ポイント boundsやframe等で使用される論理的な画面サイズ。通常はこれを意識してプログラムを作成します。 ピクセル 描画が行われる論理的な画面サイズ。ピクセルパーフェクトな描画が必要な場合には、このグリッドに合うように描画を行う必要があります。 デバイス 端末に搭載された液晶の物理的なピクセル数。これが上記ピクセル数と一致しない場合には、ピクセルパーフェクトの描画は非常に難しくなります。 このサイトの解説がわかりやすいです。 https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions 拡大モード iPhone6, 6 Plusでは、画面設定から拡大モードが選択できます。 上記の表にまとめた通り、retinaの倍率はそのままで、ワンサイズ小さいiPhone相当のポイント数になります。 iPho

スマホデザイン・UI 2014.07.07 WEBサイトやアプリの【Retina対応方法おさらい】 昨年からiPhone、iPad、iPad miniなどApple系デバイスの広がりによって急速に浸透して行った【Retinaディスプレイ】のモバイル端末。 一番はじめに打ち出された【Retina】という単語がユーザーにも浸透していますが、Windows8.1などでも高解像度(高DIP=Retina)対応が打ち出され、デバイス対決の舞台は”解像度”の戦いへと切り替わってきているのではないでしょうか。 我々WEBサイト制作者、WEBアプリ制作者が逃げられないのが、この高解像度ディスプレイへの対応になります。 今回は、WEBサイト、アプリ両方に影響があるRetinaへの対応方法をおさらいしてみましょう。 【関連ページ】スマホサイトを高速化、モバイルファーストインデックス対策 画像をRetina対応

/* 参照元によって振り分け処理 */ $referer = isset($_SERVER['HTTP_REFERER']) ? $_SERVER['HTTP_REFERER'] : null; if (preg_match("|^https?://[a-zA-Z0-9-]+\.hoge\.jp|", $referer)) { // "xxx.hoge.jp" サイト内からのアクセス時の処理。 } else { /* 直接アクセス時の処理 */ } $_SERVER['HTTP_REFERER'] は取得できるとは限らないとのご指摘を受け、 isset($_SERVER['HTTP_REFERER'])の箇所を入れました。

Chromeの拡張機能「Edit This Cookie」を使うと、クッキー情報を参照するだけでなく、 変更することもできます。 1)「Edit This Cookie」をインストールするためにChromeウェブストアに行きます。 https://chrome.google.com/webstore/category/apps 2)「Edit This Cookie」と検索すると、下記の拡張機能が出てきます。 3)「＋CHROMEに追加」ボタンをクリックします。 4) 参照したいWebサイトを表示させておいて、「Edit This Cookie」のアイコンを クリックします。 表示しているWebサイトのクッキー情報が表示されます。 ここでは、クッキー情報の削除や変更ができます。 変更したい場合は、「値」を変更後、「Cookieの変更を適用」をクリックします。

WEBサイトのコンテンツをより分かりやすく、より伝わりやすくするためのデザイン設計方法として注目を集めているコンテンツファーストですが、従来のWEB制作との違いを実践できるレベルで理解できていない方も多いと思います。 そこで本稿では、コンテンツファーストという考え方が、従来のWEB制作とどのような違いを持っているのかの説明から、その実践方法までご紹介していきます。 従来の制作フローとコンテンツファーストの制作フローの違い コンテンツファーストを用いるか否かで、WEB制作のフローは大きく異なります。 両者の違いを比較するために、フロー図を交えながら確認していきましょう。 従来のWEB制作フロー これまで一般的とされてきたWEB制作フローは「デザイン先行型」といえるものでした。 図のように、早い段階でワイヤーフレーム（ページレイアウトの骨組み）を決定し、そこにいれるコンテンツ（文章）を考えてい

Apple Design Resources Design apps quickly and accurately by using Figma, Sketch, and Photoshop design kits, guides, and other resources.

ユーザーはデザインを見たいのではなく、コンテンツを求めてサイトにアクセスします。Web UI Patterns 2016 Vol. 1で説明した通り、デザインは直感的で分かりやすくコンテンツを表示するための手段にすぎません。 この記事では、Webにおける12通りのレイアウトのパターンを実際の例や良い実践方法、共通のシナリオを通して見ていきます。 1. カード 2. グリッド 3. マガジン 4. コンテナの不使用 5. スクリーン分割 6. シングルページアプリケーション（SPA） 7. Ｆパターン 8. Ｚパターン 9. 水平的なシンメトリー 10. 水平的なほぼシンメトリー 11. 放射線状のシンメトリー 12. アシンメトリー 1. カード

パフォーマンスはすべてに関わる課題 パフォーマンスは利用者体験を向上するだけでなく、ビジネスにもプラスになります。コンテンツと同様、パフォーマンスはデザイン、エンジニアリング、ビジネスすべてに関わる重要な課題です。それを裏付ける事例をたくさん見つけることができます。 表示に 3 秒待たせることで 40% の利用者が離脱してしまう（Gomez） 表示速度を 68% 改善したことで、コンバージョン率が 7% 向上した（Ancestory.com） 4 秒遅くなったことでページビューが 11% 低下。20秒遅くなると 44% 低下した（Telegraph） サイトパフォーマンスを向上することで、ユーザープロフィールのインプレッションとスクロール率が上がった（Instagram） ショッピングサイトではパフォーマンスが 2 秒改善することで、離脱率が半分にまで減った（Radware） SEO にも

「モバイルファーストからコンテンツファーストへ」レスポンシブWebデザイン専門家が語る、コンテンツの捉え方 2014.11.11　火 モバイル端末の種類が増えた昨今、コンテンツはまずモバイルに合わせて作るべきというモバイルファーストという考え方。その本質はコンテンツファーストだ、と語るのがレスポンシブWebデザインの専門家である菊池崇氏。このコンテンツファーストについて詳しく聞きました。 関連する過去記事 コンテンツストラテジスト必見！レスポンシブWebデザインがアツい理由 レスポンシブWebデザインのワークフロー、デザイニングインブラウザとは レスポンシブWebデザインを語る上で欠かせない！コンテンツストラテジストが知っておくべき「HTML5」のポイント 今回は、レスポンシブWebデザインについて学ぼうとすると頻出するキーワード「モバイルファースト」を起点に、その根底にある概念「コンテン

『Pixelmator』は、信じられないほど安い（英語版29.99ドル）うえに、比較にならないほど高価な『Adobe Photoshop』にも引けをとらない強力な機能を備えていることから、今やMac向け画像編集アプリの定番となっています。ただ、Photoshop使いの人にとっては、ちょっとした違いが気になるところです。そんな人にもすぐ使えるように、Photoshopのごく一般的な操作をPixelmatorではどのように行うのか、比較しながら説明していきます。 PixelmatorとPhotoshopの見た目が異なるのは、ご想像のとおりです。ですが、画像の編集に関しては、Photoshopでできるほとんどすべての作業はPixelmatorでもできます。特に、標準的なユーザーが必要とする機能なら、ほとんど違いはありません。しかも、Photoshopよりずっと簡単に使えるものも多いので、画像編集

はじめに 新人への説明の為に書きました。 元々は社内勉強会用のスライドのメモだったものを、いい感じに直して公開する事にしました。 「勉強は真面目にするものだ」と考えている人には向きません。 「技術的な事は正確でなければいけない」と考えている人には向きません。 基本的な事から馬鹿丁寧に書いてあるので長いです。時間ある時用の記事です。 誤解を生じるぐらい噛み砕いて簡単に説明してあります。 教科書的に通して読むことでWebAPIが理解出来るように書いてあります。 対象者 htmlとcssは書ける phpとjsを主にコピペでしか書けない IT関連の基本的な用語も知らない、理解してない WebAPI？何それおいしいの？っていう人 どちらかと言うと営業寄りの部署に所属 アジェンダ 第1部 知識編 WebAPIの 仕組みを理解する 用語を理解する 第2部 実践編 WebAPIを作る WebAPIを利用す

今の作業フローをもう少し良くしたい、と考えているデザイナーの方は多いのではないでしょうか。 日々のデザイン作業を"より快適に" "効率良く"するためには、デザインリソースを確認しておくことが重要です。 しかし、たくさんのツールやサービスがあり、実際問題どれを選んだらいいかわからなかったり……そもそも調べるのが面倒という方も決して少なくないはずです。 そこで今回は、数ある中からオススメしたいデザインリソースをピックアップしてご紹介します。 気になるものがあれば、今すぐ活用してみてはいかがでしょうか。 ※素材数などは2016年12月21日時点での情報です。今後変更となる可能性がありますのでご了承ください。 画像・動画素材関連 1. freepik http://www.freepik.com/ ベクター、PSD、アイコンと、様々な形式でデータが用意されている、便利な素材がたっぷり揃った素材サイ