絵本をクリックしていくと、ページが次々にめくっていけるようになっています。また、逆方向にもめくることが可能です。さらに画面幅に合わせて大きさも変わるリキッドデザインです。 とにかく、ページのめくれ具合 ページのめくれた後のちょっとした動きがとても良く出来ていてクオリティーが高いです こうった形のギミックをWEBサイトに導入するときにはぜひ参考にしたいコードです – CODE – HTML <div class="book bound"> <div class="pages"> <div class="page"> <h1>Boyhood</h1> <h2>by Jason Hibbs</h2> </div> <div class="page"><!--endpaper--></div> <div class="page"><!--endpaper--></div> <div class="
文字の扱い方、レイアウト、カラー、エフェクトなど、プロのデザイナーがこだわっているデザインの基本となるルールと、ついやってしまう間違いとその解決方法まで、ワンランク上のデザイナーになるためにひとつ一つをしっかり見直したい20のデザインテクニックを紹介します。 カーニングとはフォントの文字間のスペースを調整することです。カーニングの最終目的は、それぞれの文字の間が不自然な空白にならないように字面間のスペースを均等にし、テキストを美しく整然とした一つのまとまりにデザインします。 カーニングがされていない、カーニングがいいかげんな仕事は、デザインの世界において大罪の一つです。カーニングはデザイナーが早い段階で身につけるべき重要なスキルです。 20 Typography Mistakes Every Beginner Makes 基本的だけど大切なタイポグラフィのシンプルな14のルール リーダビリ
「あなたは感覚派デザイナー？それとも理論派デザイナー？」 このような質問をされると、理論派デザイナーだと答えたくなる理系出身デザイナーのタカハマです、こんにちは。 今回は、そんな理屈っぽい私の大好物である「デザインの要素と原則」をご紹介したいと思います。理論派デザイナーの方はもちろん、感覚派デザイナーの方も知っておいて損はないですよ！ 「デザインの要素と原則」はビジュアルデザイン全般に活用できる Webデザインに限らず、ビジュアルデザインの基礎を学ぶ上で、大変参考になる「デザインの原則」というものがあります。いわゆる「Design elements and principles（デザインの要素と原則）」や「Gestalt principles（ゲシュタルト原則）と言われる原則で、デザインの構成要素や要素同士の関係性が全体に与える影響をまとめたものになります。 調べてみると識者によって分類や
『Webデザイン・コミュニケーションの教科書 インタビュー』 筆者が本書を執筆する際に参考にさせていただいた、8人のワークスタイルをインタビュー記事にしました。 今回のお相手は、Android界隈では知らない人はいないという、あんざい ゆきさん。 3冊のAndroid UIに特化した著書の売れ行きも好調ということで、デザインとプログラムに関する話をお聞きしました。 今回のお相手：あんざい ゆきさん 「どんなにいいデザインを描いても、実現できないとそれは絵に描いた餅でしかなくて、実際につくってさわってみないと思ってたのと違うなっていうことがあると思う。」 あんざい ゆき @yanzm 株式会社ウフィカ 代表取締役 ブログ「Y.A.Mの雑記帳」で多数のAndroid技術情報を公開。UIに特化した「Android Layout CookBook」や「Android UI Cookbook for
2013年4月5日〜7日まで米国Baltimoreで開催された、IA Summit 2013に参加してきました。Avi Itzkovitch氏による「Designing with Sensors: Creating Adaptive Experiences」から、センサーを搭載したデバイスを用いてパーソナライズされた情報を届ける「アダプティブデザイン」というコンセプトを紹介します。 2013年 05月 10日 レスポンシブからアダプティブへ – 必要な情報を、必要なときに、必要としている人へ Reiko Wakamoto 2013年4月5日〜7日まで米国Baltimoreで開催された、IA Summit 2013に参加してきました。Avi Itzkovitch氏による「Designing with Sensors: Creating Adaptive Experiences」から、センサ
クオートワークスのブログ 東京のWeb制作会社 株式会社クオートワークスのブログです。ここではWeb制作におけるノウハウやナレッジ、ビジネスに関する覚書などまとめて発信しております。 quoitworksのムラマツこと、muuuuu.orgの中の人、ムーちゃんです。こんにちは。お盆休みまでもう少しですね！みなさま仕事の進捗はいかがでしょうか。 webのデザインの現場でよくオーダーとしてあるのが、「紙っぽいデザイン」です。 webのデザインはコーディング時のことを考えすぎてしまったり、ユーザビリティや、web独自の視線の流れを意識しすぎてしまうあまりにダイナミックさに欠けたりすることが多いような気がします。 またお客さんとしても生まれてからwebを見ている時間よりも、紙のデザインを見ることが多いので、イメージとして紙（ポスター、雑誌）のような完成図をイメージされることが多いのではないのでしょ
デザインの原則をWebデザインにどのように取り入れるのか、それを言葉に表すのはなかなか難しいことです。デザインの原則を理解して手を動かす、またクライアントにデザインの説明を行うといったこともあるでしょう。 デザインにはなぜそうなるのかという理由があります。 実際のWebページのデザインを元に、デザインで大切な原則とそれらをWebデザインにどのように取り入れるのかを紹介します。 7 Undeniable Design Principles You Can't Ignore 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 photoshopvip.netというブログにも同記事の翻訳がありますが、あちらは無断翻訳・画像の使用も無断であると、元記事の作者から連絡を受けています。 使用するデザイン 1. Hierarchy -階層 2. Rep
2024.09.27 更新 美味しいとっとり市のお米！ 2024.09.20 更新 鳥取の柿「輝太郎」「太郎丸」「花御所柿」 2024.06.12 更新 新甘泉は鳥取オリジナルの梨です 2024.05.15 更新 大切な人へ夏の贈り物♪ 2024.05.03 更新 鳥取の梨を朝どれ直送！二十世紀梨の通販
Web デザイナーの時から Photoshop 派だけど、ガイドライン的な？マニフェスト的な？ものとしてオンラインゲームの UI を制作する上で気をつけていることをメモとしてまとめた。参考にしたのは http://photoshopetiquette.com/ （すばらしい！全デザイナーが読むべき） ゲームのUIを担当してまだ1年半くらいなので、多くのUIデザイナーには当たり前と思われるかも…。しかし自分が今のプロジェクトはじめるときにこれらを知っていたら大いに無駄が省けたのにと思ってる。 ちなみに今のプロジェクトはPCブラウザ向けのオンラインゲームでFlashで作られてる。 プロジェクトや会社によってはちゃんとした制作ガイドラインがあったりするのかな。Photoshop の作業を楽する方法が気になる。（JSXとかも） ファイル PSD は各画面毎に分割する Photoshopet
去る6月25日（水）、竹橋マイナビルームにてマイナビ様が主催する「Creator’s Career Lounge（以下、CCL） vol.6」が開催され、FICCから戸塚、福岡、冨田、STANDARD社から鈴木 健一氏が登壇しました。「Webデザイントレンドの潮流」をテーマに、これまでのWebデザインが歩んだ歴史と背景、そして現在Webの現場で活躍するWebデザイン技法について、約2時間に渡った講演の内容を振り返ります。 スライド デザインには目的がある 大前提として、ここでお話しする「デザイン」とはただのスキンやその作り方だけの話ではありません。「買ってほしい」「知ってほしい」「シェアしてほしい」などの目的を達成するための手段がデザインなのです。目的が変わればデザインも変わります。そしてWebサイトを取り巻く環境の変化によって目的もまた変化してきました。 環境の変化、要求の変化、デザイン
「2.5dBUTTON」はフラットデザインに似合うボタンが作れるサイトです。マウスを乗せるとポコッと立体的に浮き上がるボタンが作成できます。作ったボタンはHTML、CSSごとダウンロード可能です。 以下に使ってみた様子を載せておきます。まず、2.5dBUTTONへアクセスしましょう。 試しにボタンを作ってみました。このようにスライダーを調整するだけで色や形を決めることができます。マウスを乗せると上記のようにポコッと浮き上がります。 HTMLとCSSも自動的に出力されるので、あとはこれらをコピペすればOK。 こちらが実際に使っているときの様子です。YouTubeのロゴを作ったり汎用性が高いですね。ぜひフラットデザインのボタンを作成したいときにご活用ください。 2.5dBUTTON （カメきち）
世の中にランディングページに関する記述は無数に存在します。 しかし、情報量が多すぎて探している記事を発見することが困難だと感じている人も多いのではないでしょうか。 そんなあなたのために、過去リスクルに投稿されたランディングページに関する記事を「これから作りたい」「さらに獲得を伸ばしたい」などのステージ別にまとめてみました。 初めてのランディングページ製作や、既存ランディングページの改善の際には、ぜひとも参考にしてみてください。（参考：ランディングページ制作会社の一覧 ≫） ※ランディングページ改善に重要な要素を大きく4つに分け（ファーストビュー、ライティング、導線、その他のポイント）それぞれの項目で訴求ポイントのチェックが行えるシートを無料で公開しています。こちらもご参照ください。 「⾒た⽬は良い｣のに成果が出ないLPの特徴とは【失敗例3選】 新しくLPを作る方へ│成果の出るLPの作り方ラ
一枚の画像を使って、モザイク状の画像をアニメーションで少しずつくっきりさせるスタイルシートのテクニックを紹介します。 もうほんと、ナイスアイデア！ コードを見る前に実装方法をちょっと考えてみてください。 ↓はブラウザでの表示をアニメーションgifにしたものです。 Gif Style CSS3 Animation アニメーションはロード時のみなので、繰り返し見たい時はリロードで。 実装はこんな感じです。 HTML HTMLは非常にシンプル！ 画像はdivの背景として表示します。 <body> <div class="image"></div> </body> CSS スタイルシートも非常にシンプル、一枚の画像にモザイクからくっきりまでの各コマを並べ、CSSスプライトで次々にアニメーションで表示しています。 コードを見るまで、どうやって実装してるのか全く分かりませんでした。 body { ba
【スタイル】は東京都渋谷区でホームページ制作を行うウェブ制作会社です。ウェブサイト制作、SEO対策、ウェブマーケティングなどを承っています。良質テンプレートでの格安ホームページ制作プランもあります。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
