必読！5分でわかるレスポンシブWebデザインまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
二度目まして。デザイナーの野田です。 レスポンシブWebデザインについて、僕なりにまとめてみたのでご覧下さい。今回は、制作に関することではなく、最低限知っておかなければならないことの基本編になります。 独学でつまずいていませんか？ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。どんなスクールがあって、どんな内容が学べて、費用はどれくらいするのか、情報として持っておいて損はないはず。下記におすすめスクールを集めてみました！ レスポンシブWebデザインとは 「レスポンシブWebデザイン」とは、PC、タブレット、スマートフォンなど、複数の異なる画面サイズをWebサイト表示の判断基準にし、ページのレイアウト・デザインを柔軟に調整することを指します。 現在はPCやスマートフォンなど、デバイス毎に各HTMLファイル
必読！5分でわかるレスポンシブWebデザインまとめ その2 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
デザイナーの野田です。 前回書かせていただいた「必読！5分でわかるレスポンシブWebデザインまとめ」が、大変好評だったため、今回も続編を書かせていただきます。 今回は、応用編のつもりでしたが、前回だけでは足りていない事が多かったので、もう少し基本となる部分を固めていきたいと思います。 本当に基本的な事ですが、大切な事ですので、少しでも皆様のお役にたてればと思います。 レスポンシブWebデザインで必ず考えなければならない事 「レスポンシブWebデザイン」で制作する際には、必ず考えなければならない事がいくつかあります。 これは、考えていなければ制作する際に必ずつまずく事でもございます。 ■対応デバイスの確認 まずは、対応デバイスの確認をしましょう。 現在、様々な解像度を持つデバイスがございます。大体のサイズとして下記のものが挙げられます。 ※PCの解像度に関しては、今回は省略させていただきます
それじゃあ何も伝わらない！元ディレクターがデザイナーになって気付いた、デザイン依頼で注意すべき4つのこと : LINE Corporation ディレクターブログ
ネッツアイに火の用心 あなたのハートにG-SHOCK！こんにちは、nakatanigoです。 かつてはディレクターブログを書く立場だったのですが、諸事情により遠ざかっておりました。 というのも、かつて前職でデザイナーをしていた経験から、ディレクターを２年ほど経験した後、デザイナーに転籍したのです。 そこで、今回はその経験から、ディレクターからデザイナーにデザインを依頼する際に注意すべきことをお話させていただきます。ディレクターがデザイナーに依頼をする際、こういう言い方は避けたほうがいいという事例もあわせてご紹介します。 大前提として、デザイナーはディレクターから言われたことしかやらないわけではありませんので、依頼に疑問があれば質問し相談します。しっかりとコミュニケーションをとれば下記のような事例は起こらないと思いますが、それが抜けてしまった場合には効果の小さいデサインができあがってしまうと
サイトのレイアウトを決めるのがだいぶ楽になるグリッドシステム色々 | バンクーバーのうぇぶ屋
本当に最近はあっちを見てもこっちを見ても様々なグリッドシステムを名乗るサイトが登場してきました。PSDをダウンロードするタイプのものからCSSを吐き出してくれるものまで。 僕の面倒くさがりも来るところまで来たらしく、気が付けばブックマークの中身にグリッドシステムという名前のフォルダが出来上がる始末。 使ってないものも多いですが、今日はその中からいくつかご紹介できればと思います。 960 Grid System まずは王道の960Grid System。もはや説明なんぞいらんでしょうと思えるほど、WEB屋の間で当たり前になってきてる気がするGrid Systemですね。僕が初めてGrid Systemという名前を聞いたのもここでした。 僕はPhotoshopもFireworksもどっちも使う派なのですが、テンプレートとしてそろっていることはもちろん、HTML、CSS、Photoshop、Fi
photoshop×960 Grid SystemでWEBデザイン「How to create an elegant web layout in Photoshop」
photoshop×960 Grid SystemでWEBデザイン「How to create an elegant web layout in Photoshop」 画像処理ソフトは様々なものがリリースされており、WEB制作において利用されているソフトも多様にありますが、photoshopで作っていると言うWEBデザイナーさんは多いのではないでしょうか？今日紹介するのはphotoshopでWEBデザインをするためのチュートリアル「How to create an elegant web layout in Photoshop」です。 このチュートリアルはWEB制作を便利にしてくれる960 Grid Systemを利用する前提で展開されています。 詳しくは以下 まずは「960 Grid System」から960 Grid Systemをダウンロードして、その中にある、photoshopのベ
960pxのグリッドを基準にサイトレイアウトをする考え方「960 Grid System」 | ブロックワークス
Webサイトのレイアウトを考える上で参考になりそうなサイトを見つけました。 960pxを短冊のように分割し、そのグリッドに合わせてレイアウトするその名も「960 Grid System」というサイトです。まずは文章で説明するより絵で見てみてください。 みての通り、一見変哲もないサイトですが、実は960gridのルールに沿って作られていることが分かります。 ［60px］［20px余白］［60px］［20px余白］の繰り返しに、両脇に10pxを入れた960pxで成り立っています。 多種多様な情報をいかに見やすく、分かりやすく配置していかということを考えると、960gridのような考え方でデザインしてみるのもいいかもしれませんね。 レイアウトのベースとなるテンプレートファイル（psd、FireworksPNG、omnigraffle、visio）も無料でダウンロードすることができるので、これをベ
ページの幅960pxを基準にして、設計するグリッドデザイン | コリス
960 Grid Systemは、ページの幅960pxを基準にして、設計するグリッドデザインを紹介しているサイトです。 960 Grid System デモページ 960pxを基準にする理由としては、下記の2つが挙げられています。 最近のモニターは1024x768の解像度をサポートしており、960pxを表示するには十分である。 960という数字は、2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480と多くの数字で区切ることができ、フレキシブルにグリッドの設計を行える。 デモページでは、左右に10pxのマージンを持ち、カラム間のマージンを20pxにし、60pxをベースに12カラムと、40pxをベースに16カラムの2種類のレイアウトを見ることが
iPhoneデザインで役立ったツールまとめ
未だにiPhoneデザイン中の解像度と実機に表示される大きさに慣れないshiihoです。 今回はiPhoneのデザインで自分なりに約にたったツールをまとめてみようと思います。 それでは早速見てみましょう マインドマップで遷移図を整理 iPhoneアプリは通常のWEBページに比べて状態の変化や遷移が複雑な場合があります。 マインドマップで整理してみると上記画像のように分かりやすくなりました。 ソフトによっては画像も取り込めるのでサイトマップとしての流用もできそうです。 矢印や階層表示など自動で計算して整列してくれるので イラストレーターで作るより楽に図形を制作できます。 画像はMindNodeというMacのソフトを使用していますが XmindというソフトならWindowsにも対応しています。 MindNodeダウンロードはこちら http://mindnode.com/jp/ Xmindダウ
Wantedly 航海日誌 — 素人デザインのWantedlyが、一流デザイナーの手によって生まれ変わるまで
今日の航海日誌は仲がお送りします。 本日、Wantedlyが新デザインによって生まれ変わりました。それまでのプロセスを振り返ってみたいと思います。まだ名は明かせないのですが、めちゃくちゃ優秀なデザイナーがWantedlyに参画してくれました。暫定的に、T君と呼びます。 そもそもWantedlyのデザインの何が問題だったのか？ひとことでいうと、全体的に「筋が通っていなかった」というのが問題でした。旧デザインは、私が、「なんとなく、いいと思うから」という理由で、全体の整合性もとれないままにどんどん積み上げていったものでした。だから、ページごとにデザインの一貫性がなかったり、ところどころおかしいところも満載。 そこで、いつもチーム内では「プロのしっかりしたデザイナーにチームに入って貰いたい」という声がありました。そんなときに、CTO@kawasyの紹介でやってきたのがT君。 デザイナーT君の参画
UIデザイナーが知っておくべきエンドユーザーの10の特徴
ユーザーの視点に立ってデザインされていないインターフェースは、エンドユーザーに受け入れてもらえないはずだ。そこで本記事では、UIデザイナーが念頭に置いておくべきユーザーの習慣や考え方について焦点を当てる。 つい最近、「Ubuntu Unity」はUbuntuに正式搭載されてから1周年を迎えた。また、「Windows 8」はリリースを間近に控えている。こういった状況のなか、すべてのユーザーインターフェース（UI）は同じように作られていないという事実が明らかになってきている。実際のところ、コンピュータの使い方に革命的な変化をもたらすような素晴らしいUIデザインもあり得るだろうが、エンドユーザーを念頭に置いていないものは、その素晴らしさを証明する間もなく失敗作という烙印を押されてしまうはずだ。 筆者は長年に渡るコンピュータ経験のなかで、ほとんどすべてのLinuxデスクトップと、あらゆるバージョン
作業時間を10分の1にできて、デザイナーとコーダーのお互いが幸せになれるプラグイン「SPECCTR」が素晴らしい。
ややうさんくさい感じのするタイトルですが、ホントの話なんです。 海外のサイトを見ていてたまたま見つけて試してみたところ「このプラグインを使えばデザイナー自身、そしてコーダーのお互いが幸せになれるっ!」と思ったので全力でご紹介したいと思います。 SPECCTRについてごく簡単に説明すると… フォント名やオブジェクトのサイズ、間隔、色などをボタン一つで建築の設計図のようにデザインの仕様を書き出せる というものです。 これまで、デザインからコーディングに取りかかる際に、ボタンのサイズやレイアウト間隔を正確に調べたりするには元データをいちいち開いたりしなければならず、地味ながら非常に手間のかかる作業が必要で、それらを一覧にできる良い方法が無いのが実情でした。 また、デザイナーからコーダーにデータを渡して、いざあがって来た時のレイアウトをみると、ところどころ変わっている部分があったりして、相互の無駄
縦や横に長いサイト「高級ペライチ」1度は見ておきたいスクロール演出のまとめ32個！
HTML+CSS+JavaScriptでつくるサイトの定番演出「高級ペライチ」！ HTMLファイ部の「HTML5の鬼」ことほんだです。 カヤック社内では「高級ペライチ」という愛称で呼んでいる縦や横に長い1ページサイト。 スクロールに合わせたパララックスやアニメーションの演出が印象的ですよね。 今回は「高級ペライチ」とググると1位に表示される、 僕のはてブ「高級ペライチ」タグから厳選32サイトを紹介します！ まずは王道！縦に長い高級ペライチ
Yahoo! JAPAN - Internet Creative Award
Yahoo! JAPAN インターネット クリエイティブアワードは、2015年度の開催をもって終了いたしました。 ご応募くださった皆様、審査員・関係者の皆様、10年間ありがとうございました。
Dealing With Design - Boagworld Show
Design is the subject most likely to undermine the client / designer relationship. This post focuses on how to get client and designer working together effectively over design, rather than it descending into a power struggle. How to listen to this episode Unfortunately you cannot play this episode online. However, you can listen via your podcast player using either Apple Podcast, Spotify or RSS. U
レスポンシブなWebサイトを集めたギャラリーサイトとまとめ記事
Media Queries / Responsive Web Design JP... / Media Queriesを使ったレスポンシブな...他...全6件
北欧はコインまでラブリーなのね！ フィンランドでマリメッコ・デザインの超キュートなユーロ硬貨が発行されたよ
» 北欧はコインまでラブリーなのね！ フィンランドでマリメッコ・デザインの超キュートなユーロ硬貨が発行されたよ 『マリメッコ』といえば、女子のココロをつかんでやまないキュートなデザインで名高いフィンランドのテキスタイル＆雑貨ブランド。 ビビッドな色使い＆やわらかフォルムの果てしなくキュートなパターンが配された布製品やインテリア雑貨の数々ときたらまるで夢世界の産物、ホームページで眺めているだけでも幸せすぎてポエェェェとなってしまいます。いつかイッパツ当てて大金持ちになって（または親切なおじさまをつかまえて）ベッドルームのすべてをマリメッコで統一してやるんじゃ、という野望さえほのかに抱いてしまうというものです。 さて、スウェーデン出身のIKEAなどとともに「北欧＝デザイン」というイメージを作り出しているマリメッコ社ですが、このたびなんとフィンランド共和国の発行する硬貨をデザインしたというのです
スマートフォンアプリデザインに役立つ 基礎のまとめ！
スマートフォンアプリデザインに役立つ 基礎のまとめ！：一撃デザインの種明かし（14）（1/4 ページ） 各キャリアが新Android携帯を続々と発表し、スマートフォンへの注目がますます盛り上がる中、アプリケーションも、iPhone／Androidともに展開するものが増えてきました。 そういった中で、本稿ではスマートフォンアプリのデザインのコツをまとめてみます！ iPhone／Androidともに展開しているアプリ3例 まずは、iPhone、Androidともに展開している有名アプリを3つ紹介します。それぞれのスクリーンショットを見ながら違いを探してみてください。 【1】クックパッド レシピの投稿と検索ができるアプリです。PCサイトの雰囲気はそのままに、トップ画面を旬のキーワードと履歴、検索ボックスのみに絞ったシンプルなUIになっています。要素とコンテンツを極力減らすことで、レシピ検索に集中
触れる・動くによって変わるデザインプロセス
5月26日、青森にて今後のWebサイト制作との向き合い方というイベントが開催されました。今回は これから求められるWebコミュニケーションスキルと題してプロトタイピングの基礎を解説しました。 CSS Nite in TAKAMATSU のとき「静的なカンプは過去の手法」と話しましたが、ではどうしたら良いのかを考えるキッカケとして本セミナーは参考になったかと思います。 「とりあえず見せて」の解釈について 人は誰しもアイデアをもっていると思います。 自分の頭の中ではハッキリしていたとしても、人に伝えることが出来なければアイデアは活かされることはありません。アイデアはどうすれば伝えることが出来るのでしょうか。 「話せば分かる」という言葉がありますが、そう簡単にはいかないのが現実。同業者で同じような知識を持っていたとしても、同じ言葉が違ったふうに解釈される場合があります。 Webサイトデザインのア
「レスポンシブWebデザイン」の是非に関する考察 - outtakes
こもりまさあきさんによる『レスポンシブ・ウェブデザイン』（MdN）という素晴らしい書籍も出てきて、2012年後半は、さらにレスポンシブWebデザインへの取り組みが増えそうです。 スマホを購入した理由のひとつとして「PCサイトを見たいから（PCメールをやりとりしたいから）」というものが上位に来ることがあるといった統計（リンク）がよく引き合いにだされますが、これって、その昔、「印刷用のCSSの実装」とデジャブします。つまり、ユーザーの声「えっと…. そのまま印刷したいんだけど」。 よかれと思って行う実装がかならずしも喜ばれることではないかもしれないとう想像力をキープしておかなければなりません。 さて、レスポンシブWebデザイン。これには2つの意味合いがあると考えています。 ひとつは、ワンソースでのマルチデバイス対応。デバイスごとにことなる対応を行うまでの手間はかけられない、っていうときに使う方
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://webdesignmatome.com/webdesign/inspiration
