切れないハサミと使えないWebデザイン | ベイジの社長ブログ
本エントリーは、以下の目次で構成されています。 2種類のハサミと2種類のWebデザイナー Webデザインの特殊性 ビジュアルのディテールに神が宿らないWebデザイン 美しいが使えないWebデザインをしてしまう理由 Webデザイナーを支配する「強固な固定観念」と「裏の動機」 美しいビジュアルの根底にあるデザインの本質 本当に「最近のWebデザインはつまらない」のか？ ミスマッチが生む不幸なWebデザイン Webデザイナーに求められる自らのスタンス Web制作会社にも求められる明確な価値観 2種類のハサミと2種類のWebデザイナー 例えば、以下のような2種類のハサミが存在するとします。 工芸品のように美しいが切れ味はよくないハサミ 見た目はそれなりだが非常によく切れるハサミ 1は、ハサミとしては売れないでしょう。ただ、それが刺激的で斬新なビジュアルであった場合には、特別な賞を取ったり、美術館に
レスポンシブなウェブデザインをする際に役立ちそうなこと（主にスマホ対応）のまとめ
レスポンシブにデザインしたサイトを作った際に役立ったこと（主にスマホ対応）を備忘録的にまとめてみます。いろんな方が同じような内容をまとめていますし、基本的なことも多いですがお役に立てばうれしいです。 メディアクエリの指定方法 小さいディスプレイから指定する場合と、大きいディスプレイから指定する場合があります。どちらにせよ、PC用、タブレット用、スマホ用と分けることが多いようです。まずは大きいディスプレイから指定する方法です。 /* デフォルト：1024px以上用（PC用）の記述 */ @media screen and (max-width: 1023px) { /* 1023px以下用（タブレット用）の記述 */ } @media screen and (max-width: 767px) { /* 767px以下用（タブレット／スマートフォン用）の記述 */ } @media scre
30分でできる！Webサイトを高速化する6大原則 (1/4)
Webサイトを制作するとき、「パフォーマンス」を気にしたことがあるだろうか？ もしまったく気にしたことがないなら、気をつけた方がいい。閲覧に時間のかかる“遅いWebサイト”はユーザーにフラストレーションを与え、閲覧をやめさせてしまう恐れがある。 下記のグラフは、「Simple-Talk」という海外のオンラインメディアで発表されたユーザー調査の結果だ。アンケートページの表示にかかる時間を意図的にコントロールし、表示時間によってユーザーが感じるフラストレーションの違いを調べたものだ。 縦軸がフラストレーション（10段階）、横軸が表示までの時間を表している。1～5秒以内にページが表示された人に比べ、ページ表示までに5秒以上かかった人は2倍以上もフラストレーションを感じている。フラストレーションがあまりに高ければ、せっかく何らかの目的を持って訪れてきたユーザーも待ち切れずにブラウザーを閉じてしまう
PageSpeedを使ってWebサイトを最適化・高速化しよう | さくらのナレッジ
Google DevelopersのプロダクトにPageSpeedというWebサイト最適化ツールがある。診断＆アドバイスのツールと、HTMLなどを自動変換するツールが用意されており、これらのいずれかを使うことによって的確に既存のWebサイトの高速化が可能だ。診断結果をベースに作業ポイントを紹介していこう。 PageSpeedはモバイルデバイスを強く意識するようになった Webサイトの最適化アドバイスツールのPageSpeedは、WebブラウザFirefoxのプラグイン（拡張機能）としてGoogleから提供されてきた。同様のツールとしては米Yahoo!が提供するYSlowがある。昔はYSlowおよびYUI関連のツールを使うぐらいしか手頃な最適化手法はなかったが、2009年にPageSpeedが登場し、その後PageSpeedはGoogle Chromeの拡張機能としても利用できるようになって
フロントエンド高速化アプローチ
Updated 2011.04.27 / Published 2011.04.27 そもそも何故ウェブサイトを高速化するのかですが、ウェブサイトを高速化することで 顧客を逃さず機会損失を最小化できる(3秒以上表示にかかると大半のユーザは離脱すると言われている) 利用者のストレスを軽減でき、人とウェブサイト両方のポテンシャルを高められてPVやリピーターの増加へとつながる Googleがサイト表示速度を検索順位アルゴリズムに組み込んでおりSEO対策にも有効である など、ウェブサイトを高速化することは良いこと尽くしであり、もはやウェブサイトとして存在する以上は避けては通れない必須の実施項目であると言えます。 ウェブサイトを高速化するアプローチは、各ファイルの表示速度を高速化するフロントエンドとサーバやデータベースからのレスポンスを高速化するサーバサイドの2つに大別されます。まず今回は、フロントエ
Webサイト高速化・表示速度改善のために知っておきたい基礎知識 | ナイルのマーケティング相談室
Webサイトを高速化をすることによって得られるメリットは様々です。ユーザーエクスペリエンスの改善といった話とは別に、サーバーの台数を減らせることも大きなメリットでしょう。 サーバーの台数が減ればコストも下がるし、運用も楽になりますので、Webサイトの高速化はSEO対策に限定せずに実現したいところです。 しかし、「高速化しよう」「表示速度を改善しよう」といっても、実際に高速化を阻害するような要因を知っていなければ、どう取り組んで良いか分かるはずもありません。 今回の記事では非エンジニアの方でもサイト高速化のポイントがある程度理解できるように、大まかに要点をまとめています。 ＼ナイルがリードを増やした秘密を公開／ 高速化のための基礎知識 高速化という言葉の中には、大きく分けて２種類の概念が存在します。 フロントエンド側での高速化 サーバーサイド（バックエンド）側での高速化 フロントエンドとは
Web制作フローが「完璧」にわかる資料や流れのまとめ | コムテブログ
TL;DR 受注前、制作フロー、安定収益源の保守方法まで「作って終わりにしない」Web 制作の一連の流れを記載しておきます。社内だけじゃなく、これから独立する人、フリーランスの方も必見です。 オリエンテーション／受注前 １．書類テンプレート一式 オリエンテーションにおけるヒアリングでは、後に作成する提案・見積書に必要となる質問を用意しておきます。自社の説明をする時は、せっかちなクライアントさんもいるので、だらだら話さず、ポイントを抑えてわかりやすく説明します。ヒアリングした後は、議事録にメモし社内共有。必要な書類（ヒアリングシート／企画書／提案書／業務委託書／見積書／契約書）など一式まとめてますので、書類系のテンプレートは以下で。 企画・提案・見積・納品・契約などのテンプレ・知識まとめ２３ ２．見積もりの目安と計算方法 例えば項目を作るとき１．項目／２．内容／３．設計(人日)／４．製造(人
【超基礎】3年目ディレクターが振り返る！駆け出しの頃に本当に知りたかった5つのポイント
皆さん、はじめまして！ディレクター歴3年目のまっつんです。 ディレクターズマニュアル初投稿となりますが、いきなりすごいメソッドを書けるわけでもないので、今回は割と初心者向けの内容になります。 タイトルそのままなんですが、僕が現場で「先輩！知ってるなら先に教えてくださいよ！」と思ってた内容をざっくりとですがまとめてみました。 新人教育とかにもしかしたら役に立つ......かもしれませんので、ヨロシクです！ ※ちなみにモデル案件は『いきなりやってきたバナー制作依頼』です。 依頼が入ってから動くと大抵 "遅すぎる" はい！新人ディレクターの皆、これ気をつけましょう！ 大抵の場合「〇〇やって」と言われてから色々用意しようとすると、大抵手遅れになります。 いや、まぁデッカイ案件の場合はそれでいいかもしれませんが、新人ディレクターが任されるような『バナー制作対応』なんて案件などの場合、それだと確実に出
レスポンシブ対応CSSベースの軽量フレームワークのまとめ | コリス
そのままサイト制作に使ってももちろん便利、自分用のテンプレートを作るための勉強にも役立つCSSベースのフロントエンド用フレームワークを紹介します。 一部のフレームワークで古いIE用にmodernizr.jsやrespond.jsなどを使用しています。 Kube Kube -GitHub レスポンシブ対応、プロ仕様のシンプルでミニマルなフレームワーク。 ファイルサイズ 15.6KB 対応ブラウザ Chrome, Safari, Firefox, Opera, IE8+, and スマフォ用ブラウザ ライセンス 個人・商用ともに無料利用可 Base Base -GitHub レスポンシブ対応、ベーシックなUIエレメントやグリッド揃ったフレームワーク。LESS, Sassだけでなく、.htaccessを含むサイト制作用のフォルダやグリッドのPSDもセットになっています。 ファイルサイズ 3KB(
TumblrでWebサイトやブログを構築する際に知っておいた方がいいこと
2014.02.24 TumblrでWebサイトやブログを構築する際に知っておいた方がいいこと  TumblrをCMSとしてWebサイトやブログを構築する例を比較的多く見かける。実際このブログはTumblrで出来ているし、以前制作した[hikarucho.com](http://www.hikarucho.com)でもCMSとしてTumblrを採用している。 Tumblrで構築されたWebサイトとしては、以下が有名どころである。 
Web サイトを簡単に多言語化！ Google ウェブサイト翻訳ツール vs Bing 翻訳ウィジェット – プログラミング生放送
Web サイトに翻訳機能を付けられるツール Web サイトにコードを貼り付けるだけで多言語化できる Google ウェブサイト翻訳ツール と Bing 翻訳 ウィジェット を比較してみました。 翻訳ツールによる多言語化のメリット・デメリット はじめにウィジェットによる考えらえるメリット・デメリット。仕組みとしては既にある Web ページにツールを配置して、スクリプトにより自動翻訳の結果に差し替えるというものです。 メリット HTML を少し変えるだけで設置が簡単、労力が少ない 簡単に多数の言語に対応できる デメリット 自動翻訳の質が悪い 訪問者の期待も低い Web ページごと翻訳できるサービス（Google 翻訳、Bing 翻訳）でアクセスされた場合、自動翻訳結果の修正が反映されない Web 検索できない というところでしょうか。 Google vs Bing 機能比較概要 投稿時点での比
CSSのfont-family指定はこれで決まり！（2013冬） - 遠近法ノート
追記：最初、うっかり「2013冬」って書いてしまったんですけど、ほんとは「春」と書かなきゃいけませんでした（汗）*1 とりあえず今、CSSのfont-familyでフォントを指定するならば、これで決まり（一番下の追記も参照で）。 font-family:'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;CSSのfont-family指定、「あえてフォントを指定しない」っていうやり方もアリですが、いろいろな事情でそうも言ってられません。とりあえず今現在の最適font-family指定を考えてみたところ、上のようになりました。 指定順序、入れたフォント、入れてないフォント、すべてに意味があります。 以下説明。 ヒラギノはProではなくProN。 OS Xの和文標準フォ
[CSS]ウェブページを印刷対応にする際に、加えておくと効果的なスタイルのまとめ
ウェブページを制作する際に、デスクトップ・スマフォ・タブレットと多様なデバイスでの表示を検討する必要がありますが、プリンターでの印刷も忘れてはならない大切なデバイスです。 あなたのウェブページを印刷対応にする際に加えておくとよい、シンプルで効果的なスタイルシートを紹介します。 The printer is a device too! Responsive Design.isは文字通り、レスポンシブ デザインについてさまざまな情報を提供するサイトで、「プリンターも大切なデバイスですよ！」というのは、確かに忘れがちですね。 印刷対応にするスタイルはHTML5用で、シンプルながら非常に効果的なスタイルがまとめられています。 多くのウェブページはそのまま適用しても問題ないと思います。 CSS @media print { section { display: block; page-break-b
OGP画像シミュレータ | og:image Simulator
OGP画像シミュレータとは？ FacebookのOGP画像は正方形で表示されたり横長で表示されたりするため、デザインがとても大変。 そんな時に便利なのがこのOGP画像シミュレータ。 デザインしたOGP画像をドラッグ&ドロップし、タイムライン上でどう見えるかシミュレートしてみましょう。 https://ogimage.tsmallfield.com/ 1200 x 630 px 以上推奨 https://developers.facebook.com/docs/opengraph/creating-object-types/#properties 最低でも 600 x 315 px、また大きければ大きいほど良いため 1200 x 630 px 以上の画像サイズが推奨されています。画像がクリッピングされるのを防ぐため、縦横比をなるべく1.91:1に近づけるようにしましょう。 （2014年01月
実際のサイト上で動作するチュートリアルが簡単に作れるIntro.jsが便利すぎる件 - (ﾟ∀ﾟ)o彡 sasata299's blog
2013年05月08日18:21 JavaScript 実際のサイト上で動作するチュートリアルが簡単に作れるIntro.jsが便利すぎる件 さて、先日簡単なチュートリアル作ろうと思ったんですが、どうやるのが良いのかなーと思って悩んでました。キャプチャ取ってそこに説明文を書いて…ってしてもいいんですけど、キャプチャだと一部分なのでサイト上のどの辺なのかわかりにくかったり、サイト側は変更したのにキャプチャが古いままとかになったりしちゃいますよね＞＜ とか思って探してみたらこちらの Intro.js が便利だったので紹介してみます。 さて、この Intro.js を使うとですね、サイト上で動作するチュートリアルを簡単に作れるんですよ。使い方も簡単で、動作させたい要素に対して data-intro (表示する説明文) と data-step (チュートリアルの何番目に表示するか) を指定します。チ
Googleが推薦するHTMLとCSSのコーディング方法
2012年7月12日のGoogle ウェブマスター向け公式ブログの記事「HTML と CSS のコーディングガイドライン」で紹介されていた「Google HTML/CSS Style Guide」に書いてあるコーディング方法と感想を紹介します。 Google HTML/CSS Style Guideの日本語翻訳 Google HTML/CSS Style Guideは英語なのでGoogle Chromeで翻訳して確認していたんですが、すでに翻訳してあるサイトがあったのでこちらも参考に両方を見て確認していきました。 Google HTML/CSS Style Guideを翻訳してある記事「Google HTML/CSS Style Guide」を適当に和訳してみたは、かなり助かり参考になりました。 それではGoogle HTML/CSS Style Guideに書いてあるHTMLとCSSのコ
Webデザインのタネ | 未経験からWebデザイナーを目指した私が、Web制作のスキルアップのためのTipsをお届けします
Web制作の現場では、日々新しいデザインのインスピレーションを得るためにギャラリーサイトを活用しています。しかし、数多くあるギャラリーサイトの中から、自分の目的に合った適切なサイトを見つけ出すのは意外と難しいものです。 この記事では、複数の...
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これから身につけるWebサイト高速化テクニック一覧
The Blog | Welcome to Adobe Blog
『【Firefox】hover で 画像の alpha を操作すると、画像が縮む』
