ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。
シンプルなだけじゃつまらない？！ レスポンシブWebデザインのページデザイン工夫事例
レスポンシブWebデザインは装飾を抑えてシンプルに作るものだ・・・ということで「面白くない」「うちのサイトはデザインで売っているので、まだレスポンシブには早いかな」というようなお話を時々お聞きします。レスポンシブ＝面白くないサイトと思われがちですが、意外に探してみると面白い事例もたくさんあります。装飾は必要最低限にする代わりに、文章、写真・イラスト（と動画）、レイアウトで魅せる工夫をしているサイトが多いようです。 今回は、その工夫事例をいくつかご紹介したいと思います。 ※ただし、あまり複雑なレイアウトは運用や構築時の手間や混乱につながるので十分ご注意ください。 イレギュラーなレイアウトが面白いデザイン マウリッツハイス美術館展―展覧会の紹介 ランダムな配置とキレイなグリッドがカッコイイですね。小さい画面と大きい画面で画像を切り替えていますので少しソースは複雑と思いますが、とても計算されてい
ウォーターフォールとアジャイルにおけるマインドセット | Ryuzee.com
みなさんこんにちは。@ryuzeeです。 Allan Shalloway氏のMindsets: Waterfall, 1st & 2nd Generation Agileがとても素晴らしい記事だったので、ご本人の承諾を得て一部日本語訳で紹介します。 なお、氏がかかれたこちらの記事(拙訳)を先に読むと理解が深まると思います。 以下の表は、ウォーターフォールとAgile（第一世代、第二世代に分けた。）におけるマインドセットを表にしたものである。誤解されないようにしてほしいのは、どのマインドセットが正しいとか正しくないとかいうことは無いということである。 我々はもっと仕事をうまくやるために、マインドセットを自由に持ち、変化していくことが必要かもしれない。 ただし自分自身を変化させることは難しいし、ましてや他人を変化させることはもっと難しい。 第1世代アジャイルと第2世代アジャイルの類似点
「発想・見せ方が面白い」レスポンシブWebデザイン海外事例
巷では「リッチなコンテンツはレスポンシブWebデザインに馴染まない」との声も聞こえますが、ポイントを絞って使えばレスポンシブ対応サイトでも期待以上の効果を発揮することができます。 そこで今回は、動画等の視覚的な演出を効果的に使った、海外のレスポンシブWebデザイン事例を紹介させていただきます。 中にはECサイトや管理ツールなど、国内ではレスポンシブWebデザインが余り浸透していない分野も紹介していますので、ブレイクスルーのきっかけにしてもらえればと思います。 Case1.デザインと機能性を兼ね備えたECサイト SKINNY TIES (米) [ECサイト / ファッション] 直観的な操作で完結する、モバイルファーストな設計 様々なネクタイを「カラー」「デザイン」「幅」から選べるショッピングサイト。 注目すべきは、直観的で分りやすい商品検索や購入方法にあります。 ナビゲーションから直接、カラ
レスポンシブWebデザインがシンプルであるべき理由
レスポンシブWebデザインのサイトにはシンプルなものが多いのは、皆さまもご存じの通りかと思います。 レスポンシブWebデザインは様々なデバイス向けに広くコンテンツが閲覧できるように作るという前提がありますが、それではなぜ、様々なデバイス向けに対応させようとするとシンプルになるのでしょうか。 【理由1】小さい画面サイズの端末からのアクセスも想定する必要があり、一画面内のコンテンツは本当に必要なものにフォーカスするべきだから。 スマートフォンや一部のゲーム機など、画面サイズの小さな端末からアクセスしたときに、コンテンツが必要以上に多いと見づらいことは言うまでもありません。最近リニューアルを終えたサイトの多くが、今後数年にわたりサイトを使っていくことを想定されたものなので、当然スマートフォン等から見られることも想定して作られています。なので、そのようなサイトをPCで閲覧すると、これまでのようなコ
レスポンシブWebデザインのグローバルナビゲーションパターン（参考サイトのご紹介）
今回は、RWDのグローバルナビゲーションのパターンをよくまとめた参考サイトをご紹介させて頂こうと思います。”Adventures in Responsive Navigation”という海外のサイトです。※菊池崇さんが運営されているfacebookページ「レスポンシブWebデザイン」で紹介されていたものです。とても参考になるfacebookページですので、ぜひRWDに興味をお持ちの方は「いいね！」されるとよいと思います。 こちらのサイトでは、8つのナビゲーションパターンを紹介しています。 パターン１．”Do Nothing”アプローチ ブレークポイントまでくるとナビゲーションが真ん中寄せになり、余白が広くなるのみで特別なことは何もしていない簡単なパターンです。メニューの数が少ない場合に使えそうです。 パターン２．フッターナビゲーション グローバルナビが「MENU」というボタン一つになって、
[JS]ヘッダをスクロールしても上部に固定表示するだけでなく、途中で変更もできるスクリプト -Clingify
ヘッダをスクロールしても上部にぺたっと貼りつくように表示し、ブレイクポイントを設定するとその地点で貼りつける要素を変更するjQueryのプラグインを紹介します。 デモページ：Optionsからちょい下にスクロール かなり下の方までスクロールすると、二番目のアイテムが上部に貼りつきます。 Clingifyの使い方 Step 1: 外部ファイル </body>の上あたりに、jquery.jsと当スクリプトを外部ファイルとして記述します。 <body> ... <script type="text/javascript" src="/js/jquery.js"></script> <script type="text/javascript" src="/js/jquery.clingify.js"></script> </body> Step 2: HTML スクロールしても上部に固定配置にする
言語交換で外国語がタダで学べるサイト5選
ロゼッタストーンに4、5万円も出すなんてもったいない、ネット使えばネイティブと無料で外国語が学べるのに！ …と常々思っちゃいるんだけど腰があがらないみなさまのために、時間とやる気さえあれば語学が身につくサイトを5つ集めてみました。 言語交換世界最大手のひとつ、LiveMocha 対応37言語。アラビア語からウルドゥー語まで 195ヶ国に利用600万人を擁する無料外国語習得サイトの大手。サイトでは｢free-to-play（フリー・トゥー・プレイ：基本プレイ無料）｣モデルを採用しています。 LiveMochaのサイトで通用する通貨（｢コイン｣と呼ぶ）は買ってもいいけど、自分の母国語を学ぶユーザーの練習ワークを添削してあげても稼げるので、人のを直してあげればそのぶん無料でネイティブに教えてもらえます。言語交換ですね。 基本（無料）レッスンのプランは、｢Whole-Part-Whole（全体→部
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
YoutubeやVimeo、Googleマップ等をレスポンシブWebデザインに対応させる為のツール・「Embed Responsively」