参考にしたい！レスポンシブ × WordPress ブログ7選 | Picture Picture
今回の記事は、私、スタジオARCのデザイナー 山本カツヤが、Webデザインに関する内容でお届けします！ 今や、「WordPress」という言葉は、Webにあまり詳しくない人でも、知っているかもしれません。 当ブログ（Picture Picture）でも使用している「WordPress」は、世界で一番使われているブログシステムです。 この「WordPress」で構築されており、かつPC・スマートフォンのどちらからでも、最適化されたレイアウトで閲覧できる「レスポンシブWebデザイン」を採用しているものの中から、私が「おおお！」と思った、デザイン性の高いブログを7つ紹介していきます。 Web技術に関する話も少しありますが、難しいことは書いてないのでご安心いただけると幸いです。 「レスポンシブWebデザイン」の定義 「レスポンシブWebデザイン」とは、ひとつのHTMLで、PC・タブレット・スマート
レスポンシブWebデザインでハマりがちな%指定 │ Design Spice
レスポンシブWebデザインでは要素を可変にするために数値を%で指定することが多いですが、%指定の仕様を理解してないとハマることがあります。自分もそのような経験があったので備忘録としてまとめました。 要素の幅と高さの%指定 レスポンシブWebデザインのように、ある要素の幅を一定の比率を保ったまま可変するようにするには、通常、値を%で指定します。この時の値は、 求める要素の幅÷親要素のコンテンツ幅×100% の式で求められます。 例えば求める要素の幅が20px、親要素のコンテンツ幅が200pxの場合は、10%となります。 また、ここで言うコンテンツ幅とはmargin、padding、borderを含まない幅です。 同様に高さを%で指定する場合は、 求める要素の高さ÷親要素のコンテンツの高さ×100% となります。 marginとpaddingの%指定 左右のmargin、paddingを%で指
横メニューの作り方
レスポンシブに対応した横メニューを作る機会があったので、せっかくですし作り方を紹介したいと思います。お役に立てばうれしいです。 【追記 2014.03.19】 元々のタイトルは「レスポンシブWebデザインに対応した横メニューの作り方」でしたが、よく考えるとスマホ対応になったら縦メニューになりますのでタイトルを変更しました。 id名「toggle」の部分は横幅が480px以下の場合に表示するボタンです。481px以上の場合表示させません。その他はごく普通の横メニューです。 CSS 続いてCSSです。まずは全体を載せます。 #menu{ width: 100%; max-width: 960px; margin: 0 auto; padding: 0; } #menu li{ display: block; float: left; width: 12.5%; margin: 0; paddi
レスポンシブデザインを制作するなら頭に入れておくべき基本事項7つ | 株式会社LIG
どうも〜こんにちはぁ！ 最近レスポンシブなサイトを作ることが多いライターの、のび太です。 モバイル、タブレットユーザーが最近どんどん増えてきているので、Web制作者にとってレスポンシブなサイトが作れるってことが必須になるんじゃないかなぁ〜って感じますね。 レスポンシブデザインを制作するときに意識しなきゃいけないことはいろいろありますが、今回は「これはぜったいに知っておきたいよね！」って感じた基本的なことを7つご紹介させていただきたいと思います。 レスポンシブデザインを制作するときに意識しておきたい基本項目7つ 1. 画像の代わりになるべくCSSで表現すべし レスポンシブデザインで画像を使うと、モバイル端末ではPCに比べて回線速度が遅いため、読み込み時間が余計にかかってしまいます。 そのため、画像ではなくCSSで表現可能なものはどんどん代替していったほうがいいと思います。 立体ボタンや矢印だ
2013-2014年 Webデザインの5つのトレンド | SONICMOOV LAB
こんにちは！WEBデザイナーのアリイエです。 ひぐらしも鳴き止み、代わりに鈴虫が鳴く季節になってきましたね。 ひそかに風邪が流行っておりますので、みなさまくれぐれもお身体にはお気をつけください！ さて、今回は、2013年下半期まだまだ続くであろうWebデザインのトレンドを5つ紹介しようとおもいます。 まずは・・・ 01.フラットウェブデザイン 重いドロップシャドウやテクスチャを省いて、大胆な色、シンプルなデザインでまとめたWindows 8のUIでお馴染みのフラットデザイン。 数あるフラットデザインのサイトの中から、個人的にいいなと思ったサイトを紹介させていただきます。 Wacom（http://www.wacom.com/jp/ja） 世界シェアNo.1のペン＆タッチタブレット、液晶ペンタブレットおよび電子ペン、スタイラスペンなどのブランド製品事業などを手がけるワコムのホームページです。
完璧に分かる！コーディング一連の流れと知識(HTML5+レスポンシブ+WordPress)
作成：2014/01/27 更新：2015/08/07 Web制作 > 前回、Web制作の一連の流れを書きましたが、今回は少し掘り下げて「コーディング」についてのフローをまとめます(HTML5+レスポンシブ+WordPress)。会社によって違うと思いますが、ざっくりとしたコーディングの流れと気をつけておきたいことをメモしています。 エンジニア速報は Twitter の@commteで配信しています。 もくじ コーディング前の準備 １．仕様書の確認 ２．入稿データの確認・スケジューリング HTML5 マークアップ ３．テンプレート作成 ４．条件付きコメント ５．GCF＋キャッシュクリア ６．OGP記述 ７．ファビコン ８．アウトライン作成 ９．バリデーターをチェック CSS の設定 １０．ノーマライズスタイル レスポンシブデザイン設計 １１．モバイルファーストを基準に設計 １２．プログレッ
2014年これからのウェブ制作業界の流れ、伸びる職種、ウェブデザインのトレンドなどのまとめ
数多くのブログで2014年のトレンドをさまざまな切り口でポストしているので、その中から特に印象的で共感がもてたものをまとめて紹介します。 キーワードとしては、スマフォ・タブレットなどの小さいサイズのタッチデバイス、レスポンシブ（特に画像）、HTML5/CSS3、ビッグデータ、リスク管理が注目されています。 2014年、ウェブ制作業界全体の流れ ウェブデザインの2014年のトレンド 2014年に大きく変化するウェブデザインの7つの傾向 2014年、注目度の高いIT系の職種・役割 2014年、ウェブ制作業界全体の流れ まずは、2012, 2013年と的確な予測をだしてきたsitepointの2014年のウェブ制作業界の全体の流れから。 10 Web Predictions for 2014 スマートフォン中心の年 最終的にはデスクトップからのアクセスをスマフォが超える HTML5のウェブアプリ
新しい picture 要素の仕様が公開、レスポンシブ・イメージ最新動向
HTML5 extension （HTML5 拡張仕様） として策定されている picture 要素に関して、最新の仕様が年明け、1月 2日に公開されましたので簡単に紹介。 所謂、レスポンシブ・イメージ （Responsive images） のお話ですが、HTML5 extension （HTML5 拡張仕様） として策定されている picture 要素に関して、最新の仕様 （Editor's Draft） が年明け、1月 2日に公開されました。 ちょっと時間が経ってしまいました （10日以上、下書きのままで放置されていたのはナイショ） が紹介と、レスポンシブ・イメージ関連の最新動向を簡単にまとめてみます。 The picture Element, Editor's Draft, 2 January 2014 ちなみに、1つ前の仕様は下記になります。 The picture elemen
レスポンシブ・デザインとの違いって？アダプティブ・デザインについて考える | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お久しぶりです、ライターのYUKIです！ モービル・ファーストやレスポンシブ・デザイン、リーンUXやアジャイルなど、デザイナーとして押さえておきたいトピックはたくさんあります。私自身がまだまだ勉強不足なこともあり、今回はここに挙げたもののうちおそらく皆さんもよくご存知のレスポンシブ・デザインと同意味で使われることがある、アダプティブ・デザインについての個人的な見解をシェアさせて頂こうと思います。 「レスポンシブ・デザインて何？」という方は、まずLIGの過去記事をどうぞ。 必読！5分でわかる流行のレスポンシブWebデザインまとめ 必読！5分でわかる流行のレスポンシブWebデザインまとめ その2 必読！5分でわかる流行のレスポンシブWebデザインまとめ 制作編 はじめに レスポンシブ・デザインとアダプティブ・デザインが混同される理由 スマートフォンやタブレット、スマートテレビなどの普及により、
今、身につけたいウェブ制作のスキルを基本から学べるオススメのチェリー本 -レスポンシブWebデザイン
jQueryのドーナツ本、スマフォのマカロン本の人気シリーズから新たに発売されたチェリー本（でいいのかな）の「レスポンシブWebデザイン」を紹介します。 一言で言うとかなりの良書です。通読し、このレビューを書くために何度も読み返しましたが、新人さんはもちろん、バリバリやってる人もウェブ制作に携わる人であれば得るものがたくさんあると思います。 オススメの一番のポイントは、応用できる基礎力に重視していること。 僕も新人教育を何度もやってきて、常にこの応用力に重点をおいていました。今、役に立つだけでなく、これから先の未知のものにぶつかった時にもきっと役立つはずです。 ただ一点残念なのが、本のタイトル「レスポンシブWebデザイン」が平凡すぎることでしょうか。内容の大筋としてその通りですが、副題の「マルチデバイス時代のコンセプトとテクニック」のようにテクニックだけでなく、コンセプトにもフォーカスがあ
レスポンシブ・デザインとアダプティブ・デザインの定義を整理してみた
「レスポンシブからアダプティブへ – 必要な情報を、必要なときに、必要としている人へ」という記事を読んでいてレスポンシブ・デザインやアダプティブ・デザインの言葉の定義を一度整理しておいたほうが良さそうだと感じたので、遅ればせながら自分なりにまとめてみました。 レスポンシブ・デザインやアダプティブ・デザインについて話をする際に、そもそもの定義がずれていると話が噛み合わず、無駄な討論をしかねません。さんざん討論したあげく「ところで、アダプティブ・デザインってどんな意味で使ってる？」と問いなおしたら、お互いに勘違いしてたとか、結構ありそうな話です。 どれが正しいとか正しくないとかではなくて、僕が知る範囲で一般的に使われている定義をまとめてみました。いくつかの意味で使われていることを知っておけば、ミス・コミュニケーションも未然に防げる可能性が高くなるのではないでしょうか？ ※ここで紹介する定義を「
レスポンシブな時代に必要なWebディレクターの7つの心得
先日、僕の恩師のウェブ制作会社で開催された勉強会で「レスポンシブWebデザインのワークフロー」についてお話させていただいたんですが、その際に「意思決定層との密なコミュニケーションをとり、スムーズに開発を進めていくために、苦労した点や工夫した点」について質問をいただきました。その回答をまとめたので、このブログでも共有したいと思います。今回まとめたものはレスポンシブWebデザインでの制作に特化した内容ではないですが、以下に挙げるようなWebディレクターとしての基礎知識やスキルが、レスポンシブWebデザインのような柔軟な対応を強いられる制作では大切になると感じています。 Question: 意思決定層との密なコミュニケーションをとり、スムーズに開発を進めていくために、苦労した点や工夫した点を教えてください。 Answer: どれもディレクターとして基本的な内容になりますが、僕は以下のようなことを
CSS3のFlexboxを基本から理解して、使い方をマスターしよう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、王です。デザイナーやってます。 今回は「Flexboxを基本から理解して、使い方をマスターしよう！」ということで、初耳の方でもざっとFlexboxで何ができるか分かるように短い動画を用意しました。 動画の中で使ってたデモをアップしたので、確認してみたい方は以下のリンクをどうぞ！ デモ 昨今では、当然ながらデジタルデバイスサイズの多様化でレスポンシブデザインとやらが流行っています。 同じサイトをさまざまなスクリーンサイズに応じたデザインをしなければならない上に、コーディングにも手間がかかります。制作側からしたら何かと厄介ですよね。 「なるべく手間をかけずに作りたい！」という世界中のデザイナーの声に応えて、「Twitter Bootstrap」をはじめとした数多くのフレームワークが徐々に脚光を浴びはじめて久しくなります。 ただ、これらはあくまで古い技術の組み合わせで、革新的な技術で
レスポンシブWebデザインは臨機応変に使うのが良い
「レスポンシブWebデザイン」が題に入る本を書いてはいますが、レスポンシブWebデザイン（RWD）という手法を選択しなければならない、絶対にRWDでなければならないという理由はないと考えています。なぜなら、プロジェクトごとに向き不向きはありますし、そもそも発注側の企業文化や制作会社との相性、信頼関係の深度などによっては、RWDという制作の手法が向いていない可能性もあります。 そう考えると、なんでもかんでも安易にRWDで良いかというと、そうでもないように思います。長期的な視野で考えるとRWDのような手法が良いと考えていますが、だからといって現段階でそれが唯一の方法だとは考えていません。ゼロか百かの選択肢だけじゃなく、必要な場合は、ちょっとレスポンシブという臨機応変な対応もありですし、プロジェクトによっては個別スマホサイトを作ったほうが良いケースもあるかもしれません。 では、ウェブサイトの制作
書籍「レスポンシブWebデザイン入門」を執筆しました
この度「マイナビ」から初の著者となる「レスポンシブWebデザイン入門」を出版させていただきます。本書について簡単に紹介します。 はじめに 本書はレスポンシブWebデザインという言葉は知っているが実際にレスポンシブWebデザインの制作したことがない方や、まだ経験が浅い方をターゲットにしています。 レスポンシブWebデザインの概要から、制作方法、制作の流れまでをおさえてます。サンプルを多く収録しましたので、その制作を通して具体的にレスポンシブWebデザインの特徴や今までのサイト制作とは異なる点を体験として掴んでもらえればと考えてます。 技術を習得するには実践を積むのが何より一番早いと考えてます。かと言って実際の案件でテスト的に経験を積むのはリスクもあるので、本書を通してその機会を積んで頂ければ幸いです。 カバーは型押し&ニス加工してます。各々の型押しのサイズが異なりマルチデバイスを表現してます
レスポンシブ・ウェブデザインでの CSS コードの書き方 | Yomotsu net
いわゆるレスポンシブ・ウェブデザイン、つまりメディアクエリーを採用した Web サイトを構築する際の一番管理しやすいと感じるコードの書き方をまとめました。ただし、あくまでも個人的な、経験から感じた意見ですので絶対ではありません。 CSS のコードの配置広く知られている方法はいくつかあります。 CSS ファイル自体を分ける方法 @media 規則で 1ファイル内にメディア特性単位に書く方法 @media 規則で 1ファイル内にパーツ単位で書く方法 それぞれをコードで表すなら以下の書き方が該当します。 方法1 : CSS ファイル自体を分ける方法この方法は管理が大変でおすすめできません。これでファイルごとコード分割されてしまったらコード検索しづらいわけです。 <link rel="stylesheet" href="desktop.css" media="(min-width:769px)">
5分で分かるレスポンシブWebデザイン
レスポンシブWebデザインとは単一のHTMLでスマートフォン、タブレットといった画面サイズが異なるデバイスへ対応できるWebサイト制作手法をいう。2010年に誕生し、今も進化をしている。言葉だけを引用するとレスポンシブとは“反応／変化”なので、それに環境に応じて変化するWebと広く理解する方もいるかもしれないが、基本的にはグリッドシステム、フルードイメージ、メディアクエリを利用してマルチデバイスに対応させる手法がレスポンシブWebデザインだ。 欧米でも2012年にはリニューアルとともにレスポンシブWebデザインをする大企業のサイトも続々とローンチされている。世界的に有名なオンライン・メディア「Mashable」でも、ポストデスクトップ時代の終わりとモバイル時代の幕開けを理由の1つとしてレスポンシブWebデザインが2013年のメガトレンドと予想している。
レスポンシブWebデザインについてのまとめ - DESIGNMAP
端末の多様化がますます加速しています。ここ数ヶ月のニュースをみただけでも、AmazonのKindle、AppleのiPad mini、GoogleのNexus、MicrosoftのSurfaceなどの端末が紙面をにぎわしています。こうした端末「超」競争時代にどうやってWebサイトを構築したらよいのか。また、Twitterのように、モバイルユーザーがPCユーザーより増えているサイトも存在しています。 この対応策として、レスポンシブWebデザインという手法が生まれました。レスポンシブWebデザインは、１枚のHTMLで、あらゆる端末に適応させる手法です。一方で、従来から行われている手法に、最適化した専用サイトを用意する手法があります。 レスポンシブWebデザインをめぐる動き 2012年6月にGoogle ウェブマスター向け公式ブログで、『Google がお勧めするスマートフォンに最適化されたウェ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ひとりでWeb制作できた！Webデザインの勉強にもなる独学「スライド」総まとめ
レスポンシブWebデザインを学びたい人が読むと参考になるスライド
