コンバージョン率が改善された実例から学ぶフラットデザインの効果的な使い方
一年くらい前は、フラットはただのトレンドでしょ、と言われることもありましたが、この一年で日本でも多くのWebサイトで採用されており、一過性のものではなくなりました。これから制作されるサイトの多くでフラットが採用され、またどんどん進化していくことと思います。 そんなフラットの見た目的な美しさだけでなく、実際に改善された事例を元にした効果な使い方を紹介します。 How Flat Design Increases Conversion Rates 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。� 海外のブロガーから日本の他ブログでの無断転載や無断翻訳を聞くのでご注意ください。削除依頼しても無視っていうからひどい。 ミニマリズムがコンバージョンレートを261%増やした例 コンテンツファーストとモバイルファースト ボタンのデザインを変えたらコン
[CSS]スクリプト無し、CSSで実装されたパタッと開くアニメーションがかわいいスタイルシートのテクニック
スクリプト無し、CSSで実装されたパタッと開くアニメーションがかわいいスタイルシートのテクニックを紹介します。 パタッは2種類、↓の一つ目から二つ目を想像してみてください。 Reading Is Fundamental 見事に再現されていますね。 HTML 一つ目に紹介したデモ、半分からパタッとなるHTMLから。 開く時のテキストの区切れはspanで実装します。 <article> <a class="btn-fold-2" href="#"> <span>Don</span><span>ate</span> </a> </article> 二つ目のスライドしてパタッと開くのもHTMLの構造は基本的に同じです。 <article> <a class="btn-fold-1" href="#"> <span>Donate</span><span>to RIF</span> </a> </ar
![[CSS]スクリプト無し、CSSで実装されたパタッと開くアニメーションがかわいいスタイルシートのテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/299530ef13666321db52a40926f6128520049172/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014100204.gif)
起業するときに助かる！Web制作者が独立するために必要なまとめ - コムテブログ
TL;DR 筆者が起業するまでに必要だったことや流れ。今回は簡易的な情報となっていますが、知っておくとフリーや起業前に役に立つことをまとめます。起業から少し時間が経ったので記憶があいまいですが、ざっくりとした流れと気をつけておきたいことをメモしています。 創業前に準備すること 起業前に事業内容と企業理念を決定し、会社案内資料をパワポで作成しておきます。内容は企業理念・事業内容・解決できること・会社概要など。 １．定款作成前 定款作成前に準備しておきたいこと、事務所について調査しておくべきことのリストです。実印・銀行印・角印・ゴム印に関しては司法書士さんに社名の重複がないか調べてもらった後に作成します。 事業所物件候補を見つけたら、不動産屋に連絡 回線がひけるかどうか聞く 改装可能か、どこまで改造出来るか聞く 計画している事業内容で賃貸可能か確認 信用審査があるので待つ 審査 OK でテナン
[CSS]フォームを入力する際、気持ちいいアニメーションで入力欄をちょっとだけ目立たせるスタイルシートのテクニック
ユーザーがフォームの入力欄をフォーカス・アクティブした際、アニメーションを加えて入力欄をちょっとだけ目立たせるスタイルシートを紹介します。 アニメーションでおっと思わせるだけでなく、入力欄が複数並んでいる時にアニメーションで目立たせるとフォーカスを失わずに入力できる効果もありますね。 Some :active & :focus effects 使い方は簡単、CSSファイルを外部ファイルとして記述し、input要素にclassを加えるだけです。CSSファイルは上記ページの下部「Download」からダウンロードできます。 エフェクトのカラーを変更したい場合は、CSSファイルで一括置換するだけでOKです。 HTML <head> ... <link rel="stylesheet" type="text/css" href="active_and_focus.min.css" media="a
[CSS]OS X Yosemiteのように背景が透ける美しいパネルを実装するスタイルシート
昨日発表された2014年秋リリースのOS X 10.10 Yosemiteで採用予定の背景を半透明のブラーで透けさせる美しいパネルを実装するスタイルシートを紹介します。 記事は一日遅れですが、スタイルシートは当日で、仕事が早いですｗ OS X Yosemite Style UI ※Chrome, Safari, Firefox, IE11でどうぞ。 コードは、簡略化するとこんな感じになります。 実際のコードは上記ページを参考にしてください。 HTML タイトルのバーとコンテンツをdivで実装し、articleで内包します。 <article> <div class="title"> <h1>タイトル</h1> </div> <div class="content"> <p>コンテンツ</p> </div> </article> CSS 半透明のパネルのスタイルシートです。 *, *:aft
ウェブサイトのリニューアル時にチーム全員、クライアントとも確認しておきたい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の時短テク
スキルが増えた！今後を生き抜くためにＷｅｂデザイナーも習得しておきたい技術
作成：2014/03/17 更新：2014/11/01 Webデザイン > クライアントさんの依頼やクラウドソーシングでもライティングや撮影依頼の需要が増えてきました。コンテンツファーストの時代になり、ライターだけじゃなく「コンテンツを作れる」デザイナーやエンジニアは、今後100%重宝されます。今回はフリーでも活躍できるように、ライバルのデザイナーさんと差別化できるように「コンテンツ作成」もできるデザイナーになるためのスキルをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ コンテンツ設計 １．イラスト作成のスキル ２．写真の撮影技術と知識 ３．動画編集の技術 ４．コピーライティング ５．モーショングラフィック ６．電子書籍の作成 Webデザイナーの基本知識とスキル ７．UX・UI・IAの知識 ８．レイアウト基本原則 ９．配色＋色彩計画 １０．フ
対策すべきキーワードはいくつ？ | 検索にガンガンヒットさせるSEOの教科書
検索にガンガンヒットさせるSEOの教科書 SEO（検索エンジン最適化）テクニックで効果的にPRする 2003年に刊行され、「SEO（検索エンジン最適化）」という言葉を世に送り出し、大反響を呼んだ「検索にガンガンヒットするホームページの作り方」。伝説ともいわれた名著が、最新情報を満載し、ついに刊行！ 最新情報・動向、必須テクニックはもちろんのこと、SEOの「なぜ？」「なに？」「どうして？」を丁寧に説明します。 正しいSEOの知識を身につければ、恐いものナシ！Web制作者・運営者必須の情報が満載です！ 検索数が多い数個のキーワードで十分？キーワード選びをしていく中で、みなさんが誘導のターゲットとしたい顧客が利用するキーワードは多岐にわたることがわかったと思いますが、さて、SEOを実施するにあたってキーワードは絞り込んだ方がいいのでしょうか、それとも可能性のあるキーワードは網羅した方がいいのでし
制作前に要チェック！フラットなデザインのいいとこと悪いとこのまとめ
フラットなデザインに限らず、トレンドを知り学ぶことは大切です。 フラットなデザインの良い面・悪い面を知り、どのようなプロジェクトに使うとより効果的か学んでみましょう。 Pros and Cons of Flat Design 下記は各ポイントを意訳したものです。 はじめに フラットなデザインは、最近のデザインの中で大きな流れであることは否定できません。確かに至るところで見かけます。 このフラットなスタイルは、デザインコミュニティでその正当性とスタイルの適用について激しく議論がされてきました。ここでは、そのフラットなスタイルの良い面と悪い面の両方を見てみましょう。 良い面：フラットなデザインはトレンド フラットなデザインは非常にトレンドです、しかしこのトレンドはいつまで続くでしょうか？ もしトレンドに乗るなら、今がこのフラットなデザインを実行する時です。プロジェクトでフラットなデザインを取り
ひとりでWeb制作できた！「知識０から学ぶ」すごいスライドやサイト２７
作成：2013/07/22 更新：2014/11/01 Web制作 > 先日、お客さんのところへ提案にいったところ、「サイトを自分でも作りたいので定期的に講習会を開いて欲しい。Wordしか分からない。」と言われました。とはいっても、自分である程度、継続して勉強しておかないと、受講する人は2回目以降の受講内容を理解出来ないし、教える人も基本知識をしっかり身につけておかないと、質問に答えることもできません。 今回はWeb製作をするなら必ず抑えるべきこと、知識「０」から学ぶ、基本的な知識を習得できるスライド・サービス・サイトをまとめました。ディレクションにもOK。メジャーなもの中心です。とはいえ量が膨大になったので、必要な部分だけピックアップして学びましょう。※スライドがないものに関しては、お役立ちリンクをつけてます。 エンジニア速報は Twitter の@commteで配信しています。 もくじ
CSS3アニメーションを使ったかっこいいページを簡単につくりたい！そんな人に -CSS3 Animation Cheat Sheet
Appleのプロダクトページのように、スクロールをトリガーにCSS3アニメーションが展開するようなページを簡単に実装できるCSS3 Animation Cheat Sheetを紹介します。 「Cheat Sheet」という名称が紛らわしいですが、各種CSS3アニメーションをセットにしたスタイルシートで、ページに外部スタイルシートを加え、classをちょこちょこつけるだけで、簡単にCSS3アニメーションをページに実装できます。 CSS3 Animation Cheat Sheet CSS3 Animation Cheat Sheetのデモ CSS3 Animation Cheat Sheetの使い方 CSS3 Animation Cheat Sheetのデモ デモは2種類あります。 CSS3のキーフレームアニメーションを使用しているため、モダンブラウザでご覧ください、IEは10で。 まずは、
それなりに稼ぐアフィリエイトサイトが完成するまでの全手順 - がん保険や医療保険のサイト | アフィリエイト野郎！
先週、このブログでもお披露目した「がん保険のアフィリエイトサイト」ですが、今回は、サイトの作成過程を記録して記事にしようと思っていたので、所々でサイトをキャプチャしておきました。 過去にアフィリエイトサイトの作り方については何度か書いていおり、基本的には、今でもアフィリエイトサイトの作り方【2012版】で書いたとおりに作っているのですが、デザイン込みの作り方を解説したことはなかったので、今回はなるべく詳細に書いていきたいと思います。 今回サンプルとして使うのは、「 はじめてガン保険」というサイトです。このサイトを見ながら解説を呼んでいくとわかりやすいと思います。なお、WordPressでサイトを作っています。途中WordPressの使い方については、解説が抜けるかもしれませんので、その際は、WordPressの使い方とカスタマイズをご覧ください。 あくまでサイトの作り方の手順ですので、アフ
WEB制作のスキルに薬事法と医師法の知識は必要ではないかという提案
食品関係のショッピングサイトには細心の注意が必要となる。 ホームページ作成をする上で、最も注意しなければならないのが、法律的トラブルの回避です。 その為に契約書と規約というものを必ず設ける必要があります。 例えば、大学生の人が、アルバイトで何も考えずにホームページを受注し、相手から出された資料を元に作成したとします。 渡された資料が、既に薬事法に違反していたとします（かなり多い）。 こうした違反したページを作った場合、作成した会社と、WEB制作者に罰則が言い渡される事があります。 これを回避する為、かならずホームページ上での文章等の責任は、全て依頼元に委託する規約が絶対に求められます。 こうしたトラブル回避は、ある程度薬事法と医師法の知識さえあれば先に打開策を練る事が出来ますが、一般的WEB制作者の中には、言葉すら知らない人も居るでしょう。 今回は、こうしたWEB上での最もトラブルになりや
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
重複コンテンツが発生してしまう19の具体的なパターン - 重複コンテンツ対策完全ガイド #3 | Moz - SEOとインバウンドマーケティングの実践情報
エンジニアのためのSEO入門 コーナーの記事一覧 | Web担当者Forum
SEMキーワード調査10の手法――キーワードアドバイスツール不在時代を生き延びるワザ | Web担当者Forum
layer8.sh