コンバージョン率が改善された実例から学ぶフラットデザインの効果的な使い方
一年くらい前は、フラットはただのトレンドでしょ、と言われることもありましたが、この一年で日本でも多くのWebサイトで採用されており、一過性のものではなくなりました。これから制作されるサイトの多くでフラットが採用され、またどんどん進化していくことと思います。 そんなフラットの見た目的な美しさだけでなく、実際に改善された事例を元にした効果な使い方を紹介します。 How Flat Design Increases Conversion Rates 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。� 海外のブロガーから日本の他ブログでの無断転載や無断翻訳を聞くのでご注意ください。削除依頼しても無視っていうからひどい。 ミニマリズムがコンバージョンレートを261%増やした例 コンテンツファーストとモバイルファースト ボタンのデザインを変えたらコン
[CSS]紙、ステッチ、リボンなどのかわいいエフェクトを簡単に実装できるコードをまとめたスタイルシート -Beemuse
p, div要素などで実装したシンプルなHTMLに紙やステッチのかわいいスタイルを簡単に実装できるスタイルシートをまとめたフレームワークを紹介します。要素を少し増やすとリボンも簡単に実装できます。 Beemuse Beemuse -GitHub 使い方は簡単、CSSファイルを外部ファイルとして記述し、あとはHTMLにclassを追加するだけで、さまざまなかわいいスタイルを利用できます。 <head> ... <link rel="stylesheet" type="text/css" href="css/beemuse.min.css" /> </head> 各デモは:before, :after の疑似要素を使用しているため、IE8+でご覧ください。一部のスタイルはIE10+になります。
ウェブサイトのリニューアル時にチーム全員、クライアントとも確認しておきたい4つの大切なポイント
他のサイトがしてるからフラットにしたり、スクロール前提の長いページを使ってみたり、トレンドは確かにかっこよく魅力的に見えるかもしれません、しかし本当にそれが自分のサイトに適しているのか検討することが非常に大切です。 制作者だけでなくクライアントともしっかりと確認しておきたい、ウェブサイトをリニューアルする際に陥りがちな4つの間違いを紹介します。 4つとも大切ですが、特に3つ目は大きなプロジェクトになるほど重要ですね。 Top Mistakes When Redesigning a Website 下記は各ポイントを意訳したものです。 翻訳・画像の掲載にあたっては、Onextrapixelの許可を得ています。 はじめに：リニューアルの結果に1/3が満足していない 1. トレンドをむやみに取り入れる 2. 自分のデザインの殻に固執する 3. 具体的な期限と手順を決めない 4. 一度にまとめてリ
Web制作に必ず役立つIllustratorのチュートリアルやスライドのまとめ
ひと昔前までは「IllustratorはDTP」といった感じでしたが、Illustratorのバージョンアップによる機能強化に伴い、徐々にイラレでWeb制作をおこなう人が増えてきました。 ベクターっぽいスタイルのフラット、ベクターデータのSVGなどの影響もあるかもしれません。 Illustratorを使って、Web制作をする時に役立つ環境などの設定方法や注意点をはじめ、レイアウトやエレメントの作り方、スライスの便利技、時短テクニックなどのチュートリアルやスライドを紹介します。Illustratorで一番ネックとなる「にじみ」の理由とその解決方法も勉強になります。 Speed Design with Illustrator 翻訳版：Illustratorでインターフェイスをデザインする時に役立つ時短テクニックのまとめ ウェブやアプリなどのインターフェイスをデザインする時に役立つ14の時短テク
Photoshopの実践的なテクニックが学べる動画のまとめ
打ち出し画像にちょっとアクセントを加えたり、ぼやけた画像をくっきりさせたり、テキストをラスタライズせずにフィルタを適用したりなど、Photoshopのさまざまな実践的なテクニックを学べる動画をPhotoshop Video Academyから紹介します。 キャプチャやテキストでは分かりにくいポイントも動画だと操作が一部始終見えるので、より確実にマスターできると思います。 Photoshop Video Academy 動画はそれぞれ2〜5分くらいで解説は英語ですが、操作が動画なので分かりやすいと思います。 まぁ、同時に英会話の勉強にもなる、と。 Photoshop Blend Modes Photoshopのブレンドモードの効果を比較。 Photoshop Blend Modes Photoshopのブレンドモードを使って、画像にちょっと面白い効果を加えます。 High Pass Shar
スキルが増えた！今後を生き抜くためにＷｅｂデザイナーも習得しておきたい技術
作成：2014/03/17 更新：2014/11/01 Webデザイン > クライアントさんの依頼やクラウドソーシングでもライティングや撮影依頼の需要が増えてきました。コンテンツファーストの時代になり、ライターだけじゃなく「コンテンツを作れる」デザイナーやエンジニアは、今後100%重宝されます。今回はフリーでも活躍できるように、ライバルのデザイナーさんと差別化できるように「コンテンツ作成」もできるデザイナーになるためのスキルをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ コンテンツ設計 １．イラスト作成のスキル ２．写真の撮影技術と知識 ３．動画編集の技術 ４．コピーライティング ５．モーショングラフィック ６．電子書籍の作成 Webデザイナーの基本知識とスキル ７．UX・UI・IAの知識 ８．レイアウト基本原則 ９．配色＋色彩計画 １０．フ
[CSS]実装のアイデアが面白い！枠線から背景をずらして配置するスタイルシート
枠線から背景をずらして、ゆる〜い感じにデザインされたスタイルシートを紹介します。 HTMLはbutton要素一つで実装されており、二つの要素をマイナスマージンで強引に重ねるとかの荒技ではないです。 デモページ 実装は、こんな感じです。 HTML button要素一つで実装します。divなど他の要素に変更してもOKです。 色の違いはclass指定で。 <button class="yellow"> View More </button> <button class="blue"> View More </button> CSS 枠線は通常通りbutton要素にスタイルし、ずらした背景は疑似要素の:afterを使います。 ちょっとだけ傾けるのがポイントです。 body {width:70%;text-align:center;margin:40px auto;} button { positi
[CSS]癒されたい人へ！窓越しの雨粒がどんどん増えていくスタイルシート -CSS Raindrops
以前、JavaScriptで雨を再現した癒やし系スクリプトを紹介しましたが、今日紹介するのはスクリプト無し、CSS3アニメーションで実装する窓越しに楽しむ雨粒を紹介します。 キャプチャは静止画ですが、CSS3アニメーションで雨粒がどんどん増えていきます。
ひとりでWeb制作できた！「知識０から学ぶ」すごいスライドやサイト２７
作成：2013/07/22 更新：2014/11/01 Web制作 > 先日、お客さんのところへ提案にいったところ、「サイトを自分でも作りたいので定期的に講習会を開いて欲しい。Wordしか分からない。」と言われました。とはいっても、自分である程度、継続して勉強しておかないと、受講する人は2回目以降の受講内容を理解出来ないし、教える人も基本知識をしっかり身につけておかないと、質問に答えることもできません。 今回はWeb製作をするなら必ず抑えるべきこと、知識「０」から学ぶ、基本的な知識を習得できるスライド・サービス・サイトをまとめました。ディレクションにもOK。メジャーなもの中心です。とはいえ量が膨大になったので、必要な部分だけピックアップして学びましょう。※スライドがないものに関しては、お役立ちリンクをつけてます。 エンジニア速報は Twitter の@commteで配信しています。 もくじ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
