スマートフォン時代のWebサイト制作 第4回 画像の扱いと最適化 | デベロッパーセンター
スマートフォン向けサイトでは、デスクトップに及ばないスペックや接続回線を考慮し、いかに「軽い、表示が速い」サイトを作るかが重要です。一方で、様々な画面解像度の端末があり、高解像度の画面を搭載した端末向けには、そのサイズに対応した大きな画像が必要となる場合もあります。画像の扱いひとつをとっても、「パフォーマンス」と「見栄え」の双方を考慮しなければいけない難しさがあります。そこで今回は、前回のサンプルサイトを元に、画像関係の扱いや最適化などを解説します。 スマートフォンブラウザーはPNGに対応しています。デスクトップブラウザーでPNGを使う場合、Internet Explorer 6などの古いブラウザーに気をつける必要がありますが、スマートフォンブラウザーの場合は気にする必要がありません。 PNGは圧縮率が高く、容量を抑えることができます。また、アルファチャンネル（透過機能）を持つので、半透明
驚くほど速くする！高速化9つのポイント | Find Job ! Startup
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
2014年総まとめ、jQueryのプラグインとスクリプト100選
毎年末にjQueryのプラグインをまとめていましたが、今年はプラグインの他に単体で動作するスクリプトも加えて、jQueryのプラグインとスクリプトの総まとめとして記事にしました。 今年目立ったのは、去年から引き続きアニメーション系、縦長ページ用のスクリプトでしょうか。 1カラムのレイアウトが流行っているためか背景関連も充実していました。それとSVGをより簡単に利用できるようになったのも大きな目玉ですね。 また、jQueryに依存しない、単体で動作するスクリプトも多く開発されるようになったと思います。 背景関連 SVG関連 縦長ページ関連 スクロール連動・パララックス関連 その他スクロール操作・補助関連 レスポンシブ関連 ナビゲーション関連 レイアウト関連 コンテンツ生成関連 コンテンツ紹介・ツアー関連 スライダー・カルーセル関連 画像拡大・配置・キャプション関連 アニメーション関連 エフェ
レスポンシブWebデザインでdisplay:noneの使用はNGなのか - ECサイト構築運営に役立つ情報発信｜モバイルファーストマーケティングラボ
レスポンシブWebデザインでのサイト構築について、最近以下のような相談を受けることがあります。 「レスポンシブWebデザインでdisplay:noneを使うのはNGになるのでしょうか？」 検索していても、キーワード候補にも上がってくるくらいなので結構気にしておられる方も多いはずです。 結論から言うと、適切に使えばペナルティを受けることはありません。 レスポンシブWebデザインでのdisplay:noneの使用について レスポンシブWebデザインでの考え方の基本は、1ソースマルチデバイスで構築し、同じコンテンツを端末サイズに合わせてMedia Queriesで調整するというものです。 ただどうしても「この端末特有のコンテンツを表示させたい」といったケースでは、他のデバイスサイズでは表示しないように設定する際に上記の「display:none」を使って調整する必要があります。 display:
日本のスマホサイトは2年間でこんなに変わった (1/4)
スマートフォンやタブレット端末といった、いわゆる「スマートデバイス」を意識したWebサイト制作はもはや常識となっている。各企業のWebサイトは、次のような方法でスマートデバイスに対応していることがほとんどだろう。 スマートフォン向け専用サイトを構築する レスポンシブWebデザインで Webサイトを構築する viewportを調整する Web Professionalでは、2011年2月、有名企業のWebサイトがスマートフォンにどのように対応しているかを紹介した。 これらのサイトは、2年経ってどのような変化を遂げたのか。本記事では、取り上げたサイトに再び訪れ、サイトデザインのトレンドがどう移り変わったのかを観察。日本のスマホサイトの「BEFORE & AFTER」を紹介しよう。 半数以上のサイトがリニューアル まず、調査したサイト数に対してリニューアルしたサイトと、大きくは変化していないサイ
[SEO] レスポンシブウェブデザインと別サイト(URL)、どちらが検索順位が上がりやすい？
先週開催した「SEO for スマートフォンセミナー」より。過去に記事にしたことも、講演でお話したことも、また、こういう質問を前提とした話をしたこともなかったのでメモとして記事にしておきます。 Q) レスポンシブウェブデザインと、デバイス別に別サイトを構築する（つまり別URL）のは、どちらの方が検索順位が上がるのか？ 実はこの質問を過去に受けたことがなく、想定もしたことがなかったので、最初に伺った時は？？？となったのですが、すぐに意図を理解して、回答をしました。 回答としては、「（後者がPC向け - スマホ向けサイトの関係性を明示しているという前提で）検索順位に影響はしない、他の全ての条件が仮に同一であるならば、検索順位に差異が出ることはない」となります。 これは「MovableType と WordPress はどちらの方がSEOに有利ですか？」と同系統の質問ですよね。Google は利
![[SEO] レスポンシブウェブデザインと別サイト(URL)、どちらが検索順位が上がりやすい？](https://cdn-ak-scissors.b.st-hatena.com/image/square/17271a5df483de7748a7d230c33211ba329872d2/height=288;version=1;width=512/https%3A%2F%2Fascii.jp%2Felem%2F000%2F001%2F000%2F1000000%2F000_ogp.gif)
【流行ってるからってそれでいいの！？】googleがレスポンシブWEBデザインを推奨している理由をちゃんと考えてみよう
最近、レスポンシブWEBデザインという手法が盛り上がってきています。 もちろんPCにもスマートフォンにも対応できる素晴らしい技術であることに変わりは無いですし、弊社でもレスポンシブWEBデザインの手法を取り入れたWEB制作業務は得意としています。 でも、ちょっと待って下さい。 最近よく話題に上がるのは、「SEOに最適なレスポンシブWEBデザイン」というような表現や、「Googleも推奨しています」というようなウリ文句がひとり歩きし過ぎているように感じます。 きちんとメリット・デメリットを理解した上で導入するのであれば、確かに時代にあった手法ではあるのですが、意味もわからず「Googleが推奨してるらしいから」という考え方で導入するのはやめたほうがいいのではないか、という話を今日はしておこうと思います。 レスポンシブWEBデザインとはなにか？ レスポンシブWEBデザインについて詳しく考えるま
SEOでランキングを落とさないためのレスポンシブ・ウェブデザインへのリニューアル注意点
[対象: 全員] 想像以上のペースでスマートフォンからのアクセスが増えているサイトも多いのではないでしょうか。 モバイル向けのサイトの構築にあなたも取り掛かっているかもしれません。 Googleがもっとも推奨しているモバイル向けサイトの構成はレスポンシブ・ウェブデザインです。 すでに運用中のサイトをレスポンシブ・ウェブデザインに改修するときのSEO上の注意点を、WebmasterWorldのスレッドを基にしながらSearch Engine RoundtableのBarry Schwartz（バリー・シュワルツ）氏がまとめています。 転載の許可をもらった（というよりわざわざ聞かなくても好きに使っていいと言われた）ので紹介します。 ちなみにSearch Engine RoundtableはSEOの世界では1、2を争うほどに有名なSEOブログですがこれはバリーが個人で運用する完全な趣味ブログで彼
レスポンシブWebデザインとは (1/5)
スマートフォンやタブレット、PCなどあらゆるデバイスに対応する制作手法として注目されている「レスポンシブWebデザイン」。レスポンシブWebデザインの概念からサイト制作の基本まで、レスポンシブWebデザインによる制作案件を数多くこなす菊池 崇氏が解説します。（編集部） 本連載で紹介したレスポンシブWebデザインの基礎に加えて、画像や動画のレスポンシブ対応、パフォーマンス改善といった商用サイト構築のノウハウを大幅に加筆。さらに、解像度に依存しないレスポンシブWebデザインの考え方やスマートテレビ対応などの応用テクも盛り込みました。 レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック 定価：2,625円 (本体2,500円)／形態：B5変 (232ページ) ISBN：978-4-04-886323-0 レスポンシブWebデザイン（Responsive Web Design）
レスポンシブ対応サイトで使用されているナビゲーションのパターンのまとめ
デスクトップ、タブレット、スマフォなどのレスポンシブ対応サイトで使用されているナビゲーションのトレンドを紹介します。 特に小さいサイズになった際に、どのようにアイテムを見せるかさまざまな工夫がこらされています。 Popular Design Trends for Responsive Navigation 下記は各ポイントを意訳したものです。 ブロックレベルのメニュー 凝縮するナビゲーション フォームのセレクトメニュー 非表示のドロップダウン スライドするナビゲーションボックス 終わりに -次のプロジェクトの開始に ブロックレベルのメニュー まずは、ボックスをベースとしたデザインのブロックレベルのナビゲーションです。表示サイズに合わせて、ボックスのサイズが変わったり、配置が変わったりします。
Web制作者は知っておきたいwebサイトのレイアウト7選 │ Design Spice
レスポンシブwebデザインからグリッドデザインまでよく使われているwebデザインのレイアウト用語をまとめました。 レスポンシブwebデザイン エラスティックレイアウト リキッドレイアウト フレキシブルレイアウト 固定幅レイアウト グリッドレイアウト 可変グリッドレイアウト レスポンシブwebデザイン(Responsive Web Design) PCやスマートフォン、タブレット事に複数のデザインを制作するのではなく、 ディスプレイの幅に合わせてデザインを最適化する方法。 CSS3のMedia Queriesを利用してディスプレイサイズに応じてデザインを変更します。 メリット 一つのソースで複数デバイスに対応できるのでメンテナンスが容易です。 また今後デバイスの種類が増えてもそれに対応できます。 それぞれのデバイスに合わせた形で調整できるのでユーザーエクスペリエンスも高くなります。 デメリッ
レスポンシブデザインをコーディングする時の、自分なりのちょっとしたTips
前にこの記事で、レスポンシブデザインをコーディングの仕方の基本的なことを説明をしましたが、今回は自分が製作してる時に気をつけていることや、よく使う方法を書いておこうと思います。 案件や作業フローによって全然違う方法がよい場合もあるかもしれませんので、参考程度にどうぞ。 要素のマークアップ順序 会社や作業フローによるかと思いますが、今のところ、PC用とスマートフォン用のデザイン2枚が出来上がってくる事が自分は多いです。 そのデザインを見ながらHTMLを作っていきますが、この時スマートフォンのデザインを見ながらマークアップしたほうが良いと思いました。 文章の意味付け的にデザインで順序変えるのはどうなのよというのはありますが・・・。 positionを使って再現するデザインの場合はPCは簡単に位置を入れ替えることができますが、スマートフォンのデザインは320px～リキッドデザインにすることが多い
レスポンシブwebデザインの作り方とSEOとUXを考察
2013年は更に レスポンシブ は流行ではなく 一つのデザイン定義として定着する年なのではないかと。 その定着する新しい手法のデザインの作り方と SEO 、 UX の観点から考察していきたい。 レスポンシブwebデザインの基本 レスポンシブwebデザイン とは 1ファイルでどんなデバイスでも柔軟に対応する事が出来る手法です。 この手法が編み出される前は、端末別等で違うCSSファイルを呼び出し、デザインを変えていたかと思いますが、このやり方だとデザインを変更する時に端末別に分けた分のデザインを変更しなくてはなりません。 レスポンシブwebデザイン もそうゆう意味では変えなくてはならないのですが 横幅の計算でデザインしていきますので変更点が少なくなります。 初めは リキッドデザイン と似ていると感じると思いますが、違いはこちら ■リキッドデザイン これで レスポンシブwebデザイン とはなんぞ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
1216彩票-官网平台
Responsive Web Design JP（日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト）
サイトの様々な確認作業に使うチェックツール達！レスポンシブ、パフォーマンス、クロスブラウザ対応等全部！ | バンクーバーのうぇぶ屋