The Blog | Welcome to Adobe Blog アドビのブログでは、Creative Cloud、Document Cloud、Experience Cloudの最新情報や役に立つ情報を紹介しています。
他に何がほしいってんだ、クソ野郎 お前はウェブサイトを作ってその糞サイトを最高だと思ってるんだろ? お前は13MBに及ぶパララックスエフェクト付きのクソ重いページがアホらしいグッドデザイン賞をとるとでも思ってるんだろ? お前は20kgあるjQueryファイルと83個のpolyfilがIE7をまともに動作させると思ってるんだろ? どアホ、お前は間違っている。俺様が俺の考える最強のウェブページを教えてやる。 クソ軽量でクソ速いページ 全てのデバイス幅に対応できる どんなうんこブラウザでも見た目が一緒 お前のサイトに訪れるどんな糞野郎でもアクセス可能 読みやすく伝えたいことが明確(もっともお前が5MBサイズのシャレオツなコーヒー写真ではなくて伝えたいことがあればの話だがな) よく聞け、糞野郎ども お前らはハッキリ言ってオーバー・デザインだ。この史上最強のウェブサイトを見てみやがれ。俺がごみコンテ
HTML・CSSコーディングを取り巻く状況は、数年前と大きく変わっています。最近では、2016年11月にHTML 5.1が勧告されたり、2015年8月頃にChromeのブラウザーシェアがInternet Explorerを抜いたりといったニュースがありました。また、2017年4月にはWindows Vistaのサポートも終了するため、今後対応すべきはWindows 7のIE 11以降となります(※)。当たり前だと思っていたコーディング技術を今一度見直す時期にきているのではないでしょうか。本記事では2016年に見直した、今の時代に即したコーディング技術を紹介します。 ※ 参考記事「Internet Explorerサポートポリシー変更の重要なお知らせ - Microsoft」 1. meta keywords設定は検索順位に関係がない ウェブコンテンツのキーワードを指定するmeta keyw
Outbrainという会社の「WEBコンテンツの見出し(タイトル)」について、15万記事を調査したデータが、おもしろかったので簡単にメモ。 1)8ワードのタイトルがクリック率が最高に。 記事タイトルの長さとしては、8ワード(英語で)のものが一番クリック率が高かった。平均よりも21%高かった。 2)サムネイル画像を入れるとクリック率+27% ほとんどのメディアはやっている気がするが、サムネイル画像を記事タイトルに加えると、クリック率を27%も高めることができる。 たぶん、ソーシャルのOGP画像とかもそうだし、あとはスマートニュースとかにも、多かれ少なかれ、当てはまる話だと思われる。 3)偶数よりも奇数のほうが20%も吸引力がある 偶数よりも奇数のほうがクリック率が20%も高まる。たとえば「デザイン上達8のコツ」よりも「デザイン上達7のコツ」にすべきだと。 感覚的には「3・5・7」あたりの数値
縦に長い画像を1枚で印刷する際に自動分割してレイアウトするツールです。※2015.11.10 分割表示されないエラーに対処しました 使い方 画面の赤い点線で囲われたエリア部分に画像ファイルをドラッグ&ドロップすると、画像の長さを計算して自動的に折り返すように複製して配置されます。 スライダーまたは数値を入力して画像の幅を調整、また画像の位置を個別にドラッグで動かして調整してください。 画面左下の印刷ボタン、またはブラウザのメニューから印刷を行ってください。 画面左下の×ボタンはページをリロードして表示をクリアします。その際、画像幅の設定値は保存されます。 対象ブラウザ Google Chrome 最新版 対応画像形式 jpg,gif,png,svg 紹介記事 WebNAUT
こんにちは。Appleも好きだけどAppleウェブサイトも大好きなRriverの渡辺です。 最近レスポンシブなナビゲーションについて考えていて良いアイディアを探しているんですが、結局Appleのウェブサイトにたどり着きました。Appleのウェブサイトは良く出来ていると思うところがたくさんあって、ナビゲーションも良く考えて作られているんですね。 ということで、今回はAppleウェブサイトのナビゲーションの検証を通して、マルチデバイス時代のレスポンシブなナビゲーションについて考えてみたいと思います。より良いナビゲーション構築の参考になれば幸いです! 目次 マルチデバイス時代のナビゲーション 理由1: 3段階の「ナビゲーション」で確実にユーザを誘導している 理由2: 見せられるときは、しっかり見せている 理由3: コンテンツ内の「さらに詳しい」コンテンツの見せ方が絶妙 理由4: その時必要なナビ
レスポンシブイメージ、使ってますか? ウェブサイトの表示パフォーマンスの最適化をする際に、一番手っ取り早いのが画像の最適化です。そこで、イメージオプティム とかMac Automatorとpngquantなどのツールを駆使して一生懸命に画像自体を最適化したりレスポンシブイメージを使って画像を出し分けたりするわけですけども、特にレスポンシブイメージは手動でやるのは正直言ってかなり面倒です。 そ・こ・で! 本日ご紹介したいのが「Responsive Image Breakpoints Generator 」です。このツールを使えばレスポンシブイメージの複数画像の作成やHTMLの記述を自動化できて、しかも!アートディレクションまで自動化できるんです。 ということで、今回はレスポンシブイメージについての簡単なおさらいと、画像作成の基本的な考え方、それから自動化について書いてみます。 では、行ってみ
先月末、藤井さん の働く株式会社ザッパラスさん にお邪魔して、レスポンシブWebデザインの基本のキ的なお話しをさせていただきました。 題して「もう、レスポンシブでいいんじゃない?」 いま、改めてレスポンシブWebデザインについて考えるきっかけになれば、という視点で内容をまとめてみました。 4年前に「レスポンシブWebデザイン 制作の実践的ワークフローとテクニック 」という本を執筆したんですけど、そのころからウェブ制作のデフォルトはとりあえずレスポンシブでいいんじゃない?と思っていたのですが、最近、その思いがより強くなっています。職場のウェブサイトをレスポンシブでリニューアルしてから約5年が経ちますが、やっぱり、あの時レスポンシブを選択しておいてよかったとつくづく感じています。おかげで、Googleさんがモバイルインデックスを優先するという昨今のニュース にもあまり翻弄されなくてすんでいます
ウェブサイトを制作しているひとなら、モバイル端末におけるハンバーガー型ナビゲーションメニューの見つけにくさと効率の悪さ、またどれだけUXデザインの邪魔になっているのか、いくつもの記事を読んだことがあるでしょう。(この問題の参考にしたい記事はこちらやこちら、こちら、こちらからどうぞ。) 幸いにも多くのサイトやアプリで、より効率的な解決法となる代替アイデアが試されています。今回紹介しているアイデアは、他のものより優れているというわけでなく、コンテンツや内容によってパフォーマンスや実行できるかどうかは変わってきます。 01. タブ型ナビゲーションメニュー もしウェブサイトやアプリの項目が限られている場合、ユーザーはできるだけ素早くそカテゴリを切り替えたいところ。そんなときは、タブ型ナビゲーションが良い解決方法となるでしょう。 タブはもっともシンプルなナビゲーションパターンですが、デザインを制作す
この記事では、インスピレーションを与えてくれる、Webデザインの参考になるサイトを紹介します。 サイト全体のデザインやレスポンシブデザインに特化したサイト、サイトパーツ、ロゴ、アイコン、バナーなどを収集して紹介しているサイトなど10サイト厳選しました。あなたのWeb制作の刺激になること間違いなしです。 1. MUUUUU.ORG クオリティが高く、縦に長いサイトを収集しているギャラリーサイトです。サイト自体シンプルで使いやすく、またカテゴリー分けが詳細でとても探しやすいサイトです。 2. 現代デザイン 技術的、デザイン性がすぐれたサイトを収集したギャラリーサイトです。カテゴリーは業種と色、日時のみですが、業種を細かく分類しています。また、気に入ったサイトをブックマークに入れることができます。 3. I/O 3000 国内外問わない、秀逸なデザインのサイトを収集しているギャラリーサイト
ぼくがWebデザインに携わってからこれまで約5年半、Web上の多くの優良なサイトから知恵を借りて、ド素人からなんとかフリーで仕事を貰えるまでになった。そして常々、Webから与えてもらった知識や情報を還元したいと思っていた。 こうしてブログを始め自ら情報を発信する場を得たので、一度Web制作に関する良質な情報をまとめて提供してみたい。 このエントリーでは、Web制作の初心者もしくはWeb制作に興味があってこれから始めてみたいという人が、うまくWebの世界に入っていくのに役立つような情報を厳選して紹介している。 一人でWeb制作全般を見れるようになるための基礎的な情報を広く列挙してあるが、必要な箇所だけ断片的に取り上げてもらっても役立つと思う。またできるだけ日本語の中で閉じるよう、海外サイトは最低限にとどめた。 目次 とにかく1ページに詰め込むことを優先したのでかなり長いが、下の目次から必要な
パソコン教室でシニア層にインターネットの使い方を教えているときほど 「ああ、ここがもう少し改善されれば!」と吠えたくなる時がある。 「知りたい事」「申し込みたいもの」「買いたいもの」があって ワクワクしているのに、多くの人が、若い人に取っては「些細な」ミスで サイト上で目的を達成できずに諦めたり、 諦めきれないからとサポートセンターに電話して 「その情報はホームページに載ってます」と言われ落ち込んだりしている。 今日は大学の公開講座に申し込もうとしている70歳代後半女性の話。 ウキウキの申し込み「大学の公開講座申し込みたいの。英語をやり直したいのよ」といらしたMさん。 「新聞の折り込みで講座を見たのだけど、ホームページから申し込んでって書いてあって。 ホームページを見たのだけどどうすればいいのかわからないけど ホームページからしか申し込めないらしいから、やり方教えて」 とのこと。 チラシに
「売上を伸ばすにはどうすればいいの…?」 手軽に始められるようになったネットショップ。 Yahooショッピングの無料化や無料ショッピングカートの登場で、戦国時代と言われるほどに競争は激しくなってきており、運営戦略をしっかり練ることがより大切になっています。 いくら大切だと言われても実際には何をすればいいのか分からないという方も多いのではないでしょうか。 そこで今回は、これからのネットショップ運営で押さえておきたいポイントを、事例をもとに9個に絞ってご紹介します。 事例1:ターゲットを絞って差別化を図る 「まごスマイル」運営方針、いわゆるコンセプトはマーケティングについて考える上で重要な柱になります。 始めにコンセプトが優れている事例として取り上げられているサイトを紹介します。 まごスマイル まごスマイルは、孫を持つシニア世代をターゲットにしたベビー用品のネットショップです。ベビー用品といえ
こんにちは、ディレクターのエリカです。 さて、世間にはさまざまな資格がありますよね。Web関連の資格をとっても、技術系だけではなく、解析、マーケティング、そしてリテラシーといった多岐に渡る分野の資格が存在します。 そこで今回は、知ってるようで知らない、企業のWeb担当者におすすめの資格について紹介していきたいと思います。 長くWeb担当をされている方は知識の確認や棚卸しに、最近担当になったばかりという方はスキルアップのために、ぜひチャレンジしてみてはいかがでしょうか。 ※受験料のほか、認定、受講、テキストなどの費用が別途発生する場合もあります。 ※下記掲載の受講・受験料は2014年10月現在のものとなります。 企業のWeb担当者におすすめの資格10選 1. WACAウェブ解析士認定講座 http://www.web-mining.jp 「一般社団法人 ウェブ解析士協会」が認定するウェブ解析
作成:2016/04/11 更新:2016/06/29 Webデザイン > ありふれた当たり障り無いレイアウトではなくて、ほんの少しでも印象に残るレイアウトを作りたい。デザイン考えるとき、提案前に一度は見ておきたいまとめ。 エンジニア速報は Twitter の@commteで配信しています。 一部にグラデーションを使って視線をフックさせる 複数の色相を組み合わせたグラデーション。オーロラや紅葉など自然界によく見られる配色ですが、ページ全体に入れると少々キツく感じるときがあります。 そんなときは、上図のように色相差のあるグラデーションをワンポイントだけ使うことによって適度に視線をフックさせることができます。 INUPATHY こちらは被写体の気持ちを代弁するかのように、目立たせたい箇所にグラデーションが使われています。目立つけど、色ベタよりもキツイ感じはしません。 株式会社ジェイ・シー・エス
デザインやHTML, CSSの知識は不要。Bootstrap 3ベースのかっこいい縦長ページや複数ページのサイトが簡単に作成でき、デザイナーやコーダーがいなくても、そしてデザインやコードが分かる人には今までの作業がぐっと楽になるオンラインサービスを紹介します。 サンプルを元にカスタマイズしてもよし、ヘッダやコンテンツなど100種類以上のコンポーネントからクリック一つでぽんぽんページのレイアウトが完成してしまいます。 Assembly Assemblyは無料で利用でき、一部のコンポーネントとHTML化が有料($17)です。 $17は2016年2月現在、1,900円なので、フル機能でこの値段は有りですね。 まずは、Assemblyでどんなページができるか見てみましょう。 縦長スクロールのページで、ヘッダは大きい写真画像、コンテンツが数パターンあり、フッタがデザインされています。コマ数を落として
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く