Webデザインのスタイルガイドの作り方
Webサイトの制作はどんどん複雑化しており、１人で行う仕事ではなくなってきています。サイト制作では、ビジネスの目的に合わせた一貫性のあるデザインによって、快適なユーザー体験を作り出すことが重要です。 Webサイトを分割してチームでデザインをするときにチームメンバーが共通認識を持つには、デザインドキュメントまたはWebデザインのスタイルガイドを作成することが有効です。これは、エンジニアがデザインを変更してしまうことを防ぐのにも役立ちます。 異なるページの間に一貫した体験を作り出すために、スタイルガイドを用意するのはとても有効です。また、今後の開発やサードパーティ製品が生まれた際も、ブランドのガイドラインに沿い、ブランドの一部として知覚されるようにやすくなるでしょう。 Luke Clum氏は、Webデザインの第一歩としてスタイルガイドを利用することについて、昨年簡単に紹介をしました。この記事で
工数見積もりやスケジュール管理で参考になる記事10選
プロジェクトを遂行するためには、工数の見積もりやスケジュール管理が必要になります。正確な見積もりは難しく納期に間に合わなかったり、残業や休日出勤で埋め合わせたりした経験はありませんか？ 今回は、より正確に工数の見積もるための手法や、差し込み作業を考慮したスケジュール手法などについて解説されている記事をまとめました。 マネージャー、エンジニア、デザイナーなどすべての方に参考なる内容だと思います。 開発の見積もりとスケジュール管理 クックパッド株式会社の方が実践している見積もりとスケジュール管理方法について紹介されています。工数を見積もるステップや、スケジュールを立てるときの注意点、スケジュール管理の方法について学びたい方におすすめの記事です。 開発の見積もりとスケジュール管理 不安とストレスから解放される見積りとスケジュール方法 開発をしているとき、納期に間に合わなかったらどうしようと不安に
HTMLとCSSのコピペですぐに実装できる見出しデザイン14選
WEB制作で必ずと言っていいほど登場するものの１つに「見出し」があります。 そこで今回は、CSSだけで作られている見出しの中でも、実用性が高いものやCSSの最新要素を使ったものを厳選してご紹介します。コピペで簡単に実装できるので、是非使ってみてください。 飾り付きの見出し 擬似要素before、afterを使って飾りをつける見出しです。beforeとafterのcontentプロパティを変更すれば、☆や♡にすることもできます。 同じくbefore、afterを使うパターンです。transformプロパティで斜めにした長方形と長方形を重ねることで三角形を作っています。 beforeとafterを使ったシンプルな見出しです。ボーダーを指定した擬似要素の位置をpositionプロパティで指定しています。 ボーダーがある見出し キャプション付きの見出しです。シンプルなので使いやすいですが、レスポン
Webデザインにおける配色の重要性：色で共感を得るためには
Joe氏はMarvellousのコピーライターです。クリエイティブなコピーを書いていないときは、新しいSEOやコピーライティングの技術について、読んだり、調査したりシェアして過ごしています。 人の感情は「色」によって刺激されると言われています。ここでは、Webデザインにおいて色が重要である理由について考察していきます。 どうしてWebデザインにおいて色は重要か Webデザインにおける配色は大抵の場合、個人の好みに左右され、後から付け加えていくものという印象があります。もしプロダクトのディレクターがオレンジ好きなら、そのプロダクトのロゴはオレンジになるでしょう。 しかし色には見た目以上の効能があります。色には人を悲しくさせたり、信頼を構築したり、そしてブランドの精神を反映したりするはたらきがあります。 色の違いは何を意味するのか 特定の色は、人の感情に大きなインパクトを与えるような社会的な意
拡張機能いらず！Web制作に役立つ便利なブックマークレット12選
今回はWeb制作で使える便利なブックマークレットをまとめてみました。 Webサイトのデザイン時にはデベロッパーツールや拡張機能を使っている方も多いと思います。ブックマークレットの良い点は、クリックひとつで簡単に実行できるところです。 ブックマークレットをうまく活用することでWeb制作を効率化することができます。 ブックマークレットとは ブックマークレットとはブックマークからスクリプトを起動し、ブラウザ上で処理を行う簡易的なプログラムです。ページの一部を加工したり、ページ内の情報を取得したりすることができます。 ブックマークレットの登録方法 ブックマークレットの登録方法には以下の２通りがあります。 （１）ブックマークレットのリンクをブラウザのブックマークバーにドラッグ＆ドロップ （２）ブラウザのブックマーク追加からリンク先としてブックマークレットのURLを登録 ブックマークレットを使うときは
今更聞けない！ピクセルとセンチ、解像度（dpi）の関係とは
WebデザイナーならPhotoshopなどでピクセルや解像度には多少馴染みがあるとは思いますが、いざ説明しようとすると難しいなんてことはないでしょうか。 この記事では、Web上でのピクセル・センチ（センチメートル）・dpiの関係について詳しく解説します。 現在では、MacのRetinaディスプレイなど高精細ディスプレイの登場で１ピクセル＝１ドットとして成立しないケースも出てきましたが、まずは基本的な原則から見ていきましょう。 ピクセルとは ピクセルとは、デジタル画像の最小単位のことを指します。デジタル画像（ラスター画像）を限界まで拡大すると、１つ１つの点で構成されています。 点を英訳するとドットですが、このドットに色情報を追加したものがピクセルです。デジタルカメラの性能を表現するのに、よく画素数という指標が使われます。この時に使用される「画素」というのが「ピクセル」を指しています。 つまり
GoogleのUXデザイナーがサイトをチャットボット化して学んだ9つのこと
Adrianは現在Googleでデザインをしているスイスのチューリッヒ出身のフリーランスUXデザイナー。Twitter：@azumbrunnen_。 私は数ヶ月前から自分のWebサイトをチャットボット化する実験を行いました。このひとときの間に多くのご意見を頂き、マスコミがニュースで紹介してくれたりもしました。公開24時間の間に300通あまりのメールも頂きました。たくさんの方々が私のWebサイトと会話してくれたようで、まずは本当にありがとうございます。 何人かの方が今回の施策に関してのインサイトに興味を持ってくれたので、その辺を少しお話していきたいと思います。今回はそもそも対話型、ということで少し語りかける風にいきたいと思います。 それでは、まいりましょう！ botなどの対話型トレンドに対する憂鬱 私の母は毎日お決まりのように「失敗を恐れていては何も始まらず、失敗を多く経験することで大きな武
Webデザインのアイデアに困ったら覗きたいサイト10選
この記事では、インスピレーションを与えてくれる、Webデザインの参考になるサイトを紹介します。 サイト全体のデザインやレスポンシブデザインに特化したサイト、サイトパーツ、ロゴ、アイコン、バナーなどを収集して紹介しているサイトなど10サイト厳選しました。あなたのWeb制作の刺激になること間違いなしです。 1. MUUUUU.ORG クオリティが高く、縦に長いサイトを収集しているギャラリーサイトです。サイト自体シンプルで使いやすく、またカテゴリー分けが詳細でとても探しやすいサイトです。 2. 現代デザイン 技術的、デザイン性がすぐれたサイトを収集したギャラリーサイトです。カテゴリーは業種と色、日時のみですが、業種を細かく分類しています。また、気に入ったサイトをブックマークに入れることができます。 3. I/O 3000 国内外問わない、秀逸なデザインのサイトを収集しているギャラリーサイト
美しい自然のフリー動画素材サイト10選
Web広告やサイトデザインでも積極的に動画を取り入れるケースが増えてきました。簡単な日常シーンなら簡単に調達できますが、シーンによっては個人で準備するのは時間＆予算的に厳しい場合があります。 ここでは、その中でもとくに簡単に撮影できないようなスケールの大きい「美しい自然」にテーマを絞り、ちょっとしたプロモーション動画などビジネスシーンでも活用できそうな高品質の動画が揃っている無料動画素材サイトをご紹介します。 Mazwai とにかく美しい、ハイクオリティの動画素材が揃っています。トップページでは動画が１つずつ、全画面で縦に並べられていますが、右上のボタンでサムネイル表示に切り替えることができます。 videvo 動画やモーショングラフィックを無料で配布しているサイトです。Natureカテゴリーだけで1,000以上の動画が登録されていて、新着順や人気順で表示を変えることができるほか、キーワー
読み間違えると恥ずかしい！デザイン・プログラミング用語15選 | UX MILK
ITの制作現場では、どんな職種でもコードや開発言語などの話題は避けて通れません。ただでさえカタカナ用語の多い業界ですが、プログラミングやコーディングの用語などはカタカナですらなく英語表記ですし、中には読み方が不明確なものもあります。 チームメンバーもさることながら、他社の人と話すときに間違った読み方を使っていたら恥ずかしいですよね。今回は間違いの多いと言われる用語や、議論を読んでいる言葉をピックアップしてみました。 ※更新：米国英語の発音記号を追加しました Webデザイン系 width【wídθ, wítθ】 正：ウィズス、ウィドゥスなど 誤：ワイズなど HTML/CSSの幅指定で使う「幅」という単語です。よく使うものの、発音の仕方に自信が持てない人も多そうです。 height【hάɪt】 正：ハイト 誤：ヘイト 上記とセットで間違えられやすい単語。「高さ」という意味で、ウェブでなくとも「
ノンデザイナーも必見！デザインの基礎が学べるスライドまとめ
どんな商品やサービスにおいても、デザインは必ず関わってくる分野です。優れた商品やサービスをつくるためには、チーム全員がデザインに関する基礎知識を身につけておいた方が良いでしょう。 そこで今回は、ノンデザイナーでもデザインを簡単に・楽しく学べるスライドをご紹介します。もちろんデザイナーの方々にとっても役立つものばかりなので、ぜひ参考にしてください！ ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう そもそもデザインって何？という根本的なところから、良いデザインの選び方を具体例を交えて紹介しています。タイトルの通りノンデザイナー向けなので、これからデザインを勉強する人、デザイナーと関わる仕事をしている人は必読です。Q＆A方式でスライドが進んでいくのでさらっと読めます。
ゴシック体で汎用性の高い日本語フリーフォント10選【商用利用可】
日本語のフォントはとにかく漢字が多いので、英語のフォントに比べると無料のフォントの種類が限られます。デザイナーであれば、日本語のフォントは有料で購入している人も多いかと思いますが、スポットで使いたい場合など、なかなか手を出しづらいのが現状です。 そこで今回は汎用性の高いゴシック体の日本語のフリーフォントを集めてみました。 ※細かな規約はサイトごとで異なるのでダウンロードするときはよく確認しましょう。 ※4/9 0:00 10選といいながら９つしかなかったので１つ追加しました Mgen+ (ムゲンプラス) 「Mgen+ (ムゲンプラス) 」は、フリーフォントである「M+ OUTLINE FONTS」をベースに、含まれていない漢字・記号をAdobeとGoogleが共同開発した「源ノ角ゴシック(Source Han Sans/Noto Sans CJKの日本語部分）」で補い、さらに豊富な漢字や記
Webサイトをリニューアルするときに気をつけるべき10のこと
UXは、その存在を気づかせないときに成功したと言えます。Webサイトのデザインが流れるように直観的になされていて、訪問者が不満を感じることなく情報を見つけることができれば、成功です。UXこそがWebサイトのリデザイン、リフレッシュのすべてです。Webサイトがださくてうまくナビゲーションできていなければ、せっかくのコンテンツの品質、グラフィックデザインの美しさや企業の評判も意味をなしません。 UXは、よくでてきるときには気づかないものの一つです。UXが貧弱だと、その存在に気づかれてしまいます。ちょうど都市計画のようなものです。例えば、シカゴの都市計画が良く出来ていることは、アトランタのような都市に出かけたときに気づきます。シカゴの街のデザインは論理的で整然としていますが、アトランタは同じ名前を持った全く異なる道や奇妙な交差点、非論理的な配置でいっぱいだと多くの人が主張しています。アトランタへ
Webデザインが圧倒的に捗るGoogle Chromeの拡張機能12選
みなさんはChromeの拡張機能を活用していますか？ 拡張機能を使えば面倒な作業でも効率良くこなすことができます。今回はWebデザインのときに使うと仕事が圧倒的に捗るChromeの拡張機能を紹介します。 1. FireShot ダウンロードURL：FireShot ページのキャプチャを撮影できる拡張機能です。ページ全体をキャプチャ、目に見える部分をキャプチャ、選択してキャプチャすることができます。ランディングページなど縦長のページのスクリーンショットを撮影するときに便利です。 2. PerfectPixel by WellDoneCode ダウンロードURL：PerfectPixel by WellDoneCode ページ内に任意の画像を重ねることができる拡張機能です。画像を動かしたり、透過させたり、サイズを変更したりしてレイアウトすることができます。ボタンやロゴの配置を迷っているときにコ
ランディングページのデザインで守るべき９つのこと
SteveはFreshEssays.comのWebライター、著者、コンテンツプロデューサーです。彼は常にオンラインコンテンツの新しい届け方を模索しており、他のブロガーや著者、学生などにライティングの補佐をしたりもしています。 何を伝えたいのか全くわからないランディングページに辿り着いた経験はありませんか？ そのページはきっと明確なメッセージを伝え損ね、あなたを混乱させただけです。そんなページにどれくらい滞在していましたか？ そんなページをわざわざ時間を掛けて掘り返してまで、その目的を知りたいと思うでしょうか。これこそが、人々があなたのページに辿り着いたときに考えられる最悪のシナリオです。 あなたはランディングページを訪れた来訪者に、すぐに商品の購入ボタンをクリックしてほしいでしょう。そのためには、何がおすすめか、なぜそれがユーザーにとって価値があるのか、そして登録の方法を分かりやすく提示し
Flashはなぜその役割を終えたのか
デザイナー/デベロッパー。Fotogramme for Instagram 作者。フリーランサー。ウェブやモバイルアプリのUXディレクション、デザイン、開発を手がけています。 @hiro_kimu emotionale.jp。 Flashという名称が無くなってしまうーー2015年11月末、Flash Professionalのアプリケーション名称を「Adobe Animate CC」に変更するという発表がAdobeからあり、20年に及んだFlashの歴史が転換期を迎えました。「Flashは死んだ」と評されてすでに久しいですが、存在よりも先に名称が消えてしまうことになるとは思わなかった方も多いでしょう。 W3Techsによる調査結果では、2015年12月現在、ウェブサイトでのFlashの採用率は9.6%にまで落ち込んでいます。2011年1月の同調査では28.5%だったことを鑑みると、ウェブに
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
モバイルアプリのUIデザインの参考になるスライド10選
Gitを一度はあきらめた人のためのわかりやすいスライド９選