CSSは誰でも簡単に自由に書けるのですが、好きなように書いていると「ここを変更したら、違うところが崩れた」といったようにすぐに破綻してしまいます。 さらに、複数人で書いている場合は、各々が好きなように書いて読むだけでも苦痛なCSSが出来上がってしまいます。 そこで、これらの問題を解決するために考えられたのが「CSS設計」です。 今回は記事が長くなり過ぎるので、CSS設計の概要のみを説明し、参考となる公式ドキュメントへのリンクを記載しました。 CSS設計とは CSS設計は、CSSを記述する時のルールとなるものです。プロジェクト毎に適したCSS設計を採用することで、「良いCSS」にすることができます。 最近では、命名規則はBEMで、構成はSMACCSのように各CSS設計の概念を取り込んだオリジナルの規約をつくるといったことも多いようです。 「良いCSS」とは 「良いCSS」の定義として、おそら

「どうやってコーディングをして組み立てていこうか？」 いくつもの案件を経験しても、いつも悩んでしまうのがCSSの書き方です。「それなら自分なりの考えをまとめてルールを作ってしまおう」と考え、CSS設計に関する情報から自分なりにコーディングルールを作りました。 今回の内容は社内勉強会で発表した「CSSのファイル構成と命名規則」の資料を再編したものです。 すべての案件内容で最適な方法ではないこともあると思いますので、1つの考え方だと捉えていただけるとありがたいです。 詳しいコードやルールはGitHub（個人のアカウント）を参照してください。「使用しているテンプレート」リンク先のstyle.scssで実際の全体の構成が確認できます。 使用しているテンプレート CSSコーディングルール CSSは影響範囲の管理が難しい CSSで難しいことのひとつは「影響範囲」を管理することだと思います。 クラスを追

フロントエンドスタイルガイドは、デザインやテストを効率化し、UIの一貫性を高める。今回は、スタイルガイドの要件8個と、一般的なコンポーネント25個を紹介しよう。 Front-End Style-Guides: Definition, Requirements, Component Checklist by Page Laubheimer on March 27, 2016 日本語版2016年6月23日公開 フロントエンドスタイルガイドとは何か フロントエンドスタイルガイドがUXの現場でますます一般化してきている。Jeff GothelfとJosh Seidenが彼らの著書『Lean UX』で説明しているように、フロントエンドスタイルガイドはアジャイルやリーンな環境で生まれたものである。 定義： フロントエンドスタイルガイドとは、製品のユーザーインタフェースにある全要素のモジュールコレクショ

【2017年3月31日】 いまやホームページは誰でも、もの凄く簡単に作れる。ホームページ作成サービスがあり、無料で始められるものもある。 正直なところ、個人の商店や中小規模の企業レベルならコレで十分なケース多い。 ホームページを作るための言語（HTML）やデザインの知識も全く要らない。キーボードを叩けて、マウスをクリックできれば十分だ。 この記事では、誰でも使える便利なホームページ作成サービスを紹介する。日本語対応で無料から始められるもののみに限る。 この記事の後半では、実際に無料で簡単にホームページを作る手順を解説する。実際に無料のサービスを使ってホームページを一つ作ってみたので、興味のある人はのぞいてみてほしい。 目次 目次 ビジネス用のホームページなら少し投資を ホームページ作成サービスを利用するときの注意点 グーペ BiND クラウド BASE（ベース） Jimdo（ジンドゥー）

HTMLドキュメントのhead内に記述するmeta要素やlink要素、ソーシャルサービス用の要素、ブラウザ用の要素、スマホアプリ用の要素などをまとめた「HEAD」を紹介します。 HEAD -GitHub 翻訳するにあたりいくつか尋ねたところ、著者様はとてもいい人でした。 公開当初から内容がアップデートされ、ライセンスもCC0に変更されています。 オススメの最小限の構成 要素 meta要素 link要素 ソーシャル関連のhead内の要素 ブラウザ・プラットフォーム関連のhead内の要素 スマホアプリ関連のhead内の要素 メモ オススメの最小限の構成 下記は、head内に記述する最小限のタグです。

ぼくがWebデザインに携わってからこれまで約5年半、Web上の多くの優良なサイトから知恵を借りて、ド素人からなんとかフリーで仕事を貰えるまでになった。そして常々、Webから与えてもらった知識や情報を還元したいと思っていた。 こうしてブログを始め自ら情報を発信する場を得たので、一度Web制作に関する良質な情報をまとめて提供してみたい。 このエントリーでは、Web制作の初心者もしくはWeb制作に興味があってこれから始めてみたいという人が、うまくWebの世界に入っていくのに役立つような情報を厳選して紹介している。 一人でWeb制作全般を見れるようになるための基礎的な情報を広く列挙してあるが、必要な箇所だけ断片的に取り上げてもらっても役立つと思う。またできるだけ日本語の中で閉じるよう、海外サイトは最低限にとどめた。 目次 とにかく１ページに詰め込むことを優先したのでかなり長いが、下の目次から必要な

LPなどの視覚的なデザインを売りとしたサイトの場合、高い水準でカンプ通りの実装が求められる。自分では狂いなく再現したつもりでも、どこかでずれていてデザイナーから指摘されることもしばしばある。この記事では、1デザインカンプの徹底再現（2 ピクセルパーフェクト）の必要性と、そのための便利なMacOSXアプリケーションを紹介する。 要約 他人の作ったデザインを高いレベルで再現するには、ピクセルパーフェクトを狙うくらいの意気込みが必要 その為には、ブラウザへカンプを重ね合わせるチェックが有効 Helium/Mapture/LayxerXは、フローティングと透過機能を持った非常に便利なアプリケーション なぜピクセルパーフェクトを目指すのか Webサイトという技術の特性上、フォントが違ったり、組版の仕様が違ったり、文字サイズのデフォルト値が違ったり、モニタの色見が周辺環境や端末スペックによって違ったり

どんなデザインにおいても、ただしいフォント選びが成功の鍵となります。見た目だけでなく、読みやすさも考えながら、フォントの組み合わせを考えるのに悩んでしまうこともしばしばです。 フォントの組み合わせについては、これまでにもいくつか（1/２/３）の記事を紹介していますが、今回は、Google Web フォントを利用した、実用的でデザインも美しいサンプル例をまとめています。 目次 Google フォントとは？ Google フォントの実装方法 実用で使える、Google フォントの組み合わせ　パート１ 実用で使える、Google フォントの組み合わせ　パート2 Google Web フォントを見つけやすくする Font Library Google 謹製、日本語 Web フォント「Noto Sans Japanese」 Google Font とは? 通常、ブラウザで表示できるフォントは、ユーザ

Bootstrapベースのデザインカンプを作成する時にめちゃくちゃ便利で、大幅な時短にもなるPhotoshop CC2015対応の機能拡張を紹介します。 OS X, Win両対応で、日本語にも完全対応の無料の機能拡張です。

みんな大好き♪Google Analytics！！ ただ、見れるデータが膨大すぎて、あっちをクリックしたりこっちをクリックしたり・・・。 気づけば「何のデータを見たかったのか忘れてしまった」なんて事も日常茶飯事です。 実はウィジェットを配置して、見やすい一覧画面を作成できたりします。 「マイレポート」って機能ですね。 で・・・。マイレポートの作成手順とか説明してもいいんですけど、長くなっちゃうし、読むのもめんどくさいでしょ？ って事で！！ 数クリックで導入する方法を解説します Google Analyticsの標準機能で発行されるリンクをクリックするだけで導入できてしまいますので、面倒な手順は一切必要ありません。 もちろん共有されるのは「レイアウト」なので、中身はあなたのサイトのデータになりますのでご安心ください（笑） では次項でレイアウトの概要を説明した後、文末で導入方法（と言ってもクリ

どうも、まさとらん（@0310lan）です。 みなさんは、「YouTube」の動画をWebサイトやブログなどに貼り付けたことがあるでしょうか？ 「埋め込みタグ」をコピペするだけで、簡単に動画コンテンツを利用できるわけですが、最近は他にも多彩なコンテンツが埋め込めるようになっています。 そこで今回は、特にユニークなWebコンテンツを埋め込める無料サービスだけを厳選してみましたので、ぜひ参考にしてみてください！ ■リッチな情報を盛り込んだ「画像」を埋め込む！ 【 ThingLink 】 Webページに「画像」を挿入する機会は多いと思いますが、１枚の画像で伝えられるコトには限界があります。 そこで、「ThingLink 」を使うと、ごく普通の画像内に「動画」「音楽」「リンク」「テキスト」…など、さまざまな要素を埋め込むことが可能になるのです。 まずは、以下のサンプル画像をチェックしてみてください

プロジェクトの関係者でないとなかなか目にすることができないワイヤーフレームやユーザーフローもdribbbleだと、たくさんアップロードされています。 最近のWeb制作の参考になりそうなワイヤーフレーム・ユーザーフローを紹介します。

By Tim Franklin Photography マーケットリサーチアナリストとして働き、SEOやPPCのスペシャリストであり、かつ心理学をたしなんでいるというニック・コレンダさんが、心理学の視点から導き出した「コンバージョン率を劇的にアップさせるための30の心理作戦」を公開しています。「フムフム、なるほど」というものから、「恐ろしあ……」となる戦略まであり、広告運用やSEOの知識がない人もサービスを使うユーザーとして知っておくべき内容になっています。 Conversion Optimization: An Enormous List of Psychological Tactics http://www.nickkolenda.com/conversion-optimization-psychology/ 30の戦略を見る準備として、運営しているサービスをCTA別に分けてじょうご状

SteveはFreshEssays.comのWebライター、著者、コンテンツプロデューサーです。彼は常にオンラインコンテンツの新しい届け方を模索しており、他のブロガーや著者、学生などにライティングの補佐をしたりもしています。 何を伝えたいのか全くわからないランディングページに辿り着いた経験はありませんか？　そのページはきっと明確なメッセージを伝え損ね、あなたを混乱させただけです。そんなページにどれくらい滞在していましたか？　そんなページをわざわざ時間を掛けて掘り返してまで、その目的を知りたいと思うでしょうか。これこそが、人々があなたのページに辿り着いたときに考えられる最悪のシナリオです。 あなたはランディングページを訪れた来訪者に、すぐに商品の購入ボタンをクリックしてほしいでしょう。そのためには、何がおすすめか、なぜそれがユーザーにとって価値があるのか、そして登録の方法を分かりやすく提示し

アプリケーションでもWebサイトでも、ユーザーはメニューによってコンテンツを見つけ、機能を利用する。このチェックリストを利用して、メニューがきちんとその役目を果たせるようにしよう。 Menu Design: Checklist of 15 UX Guidelines to Help Users by Kathryn Whitenton on November 29, 2015 日本語版2016年2月16日公開 ユーザーの移動の手助けは、ほとんどすべてのWebサイトやアプリケーションにとっての最優先事項である。つまるところ、この上なくかっこいい機能も強力なコンテンツも、ユーザーが見つけることができないなら無意味だからだ。また、検索機能を提供しているとしても、移動の手段として、検索だけに依存すべきでないことも多い。たいていのデザイナーはこのことを理解している。そこで、自分たちのデザインに何らか

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

Webサイトやアプリを始めとして様々なプロダクトをデザインする際には、最終的に顧客に喚起してもらいたい行動 = コンバージョンを常に意識する事が重要になる。その為には気つけたいポイントが幾つかある。まずは最低限のユーザビリティーを確保する事。 コンテンツが見やすい、情報が伝わりやすいナビゲーションが分かりやすい、求める行動が起こしやすい等の基本条件を満たしている必要がある。ユーザビリティーの高いウェブサイトはこの基本条件が全て達成出来ている。 優れたユーザビリティを実現する25のUXデザイン基本概念 ユーザーエクスペリエンス (UX) 設計においては、ユーザーの心理を理解し、望んだ行動パターンを喚起させる事が重要なポイントとなってくる。例えば、ボタンをクリックさせたり、フォームを送信させせる等のユーザーに運営側が望んだ動きを導きサイトに戻ってくるようなエクスペリエンスを与えるのがいわゆるエ