知らないと損する！？色の相性についての考え方と組み合わせの方法 - MIKINOTE
色というのものは、組み合わせ次第で、さまざまな印象をあたえることが出来ます。そういう意味で、何かを作り出す際には非常に重要な要素の1つであると言えます。 ここ最近、僕が読者になっているいるブログのいくつかで、ブログのデザインや配色についての話が多いので、ちょいと書いてみることにしました。 色に対する感覚って、生まれ持ってのセンスだ！という話がけっこう多いです。けれども、「センスが良い配色」と言うのは、結局は色についての理論的なものを知っていないと、なかなか出来ないものだったりするんですよ。美術でもデザインでも、努力はセンスに勝ります。 特に、色と色の組み合わせってのは重要です。単体だと美しい色でも、別の色を組み合わせると途端に汚い色に見えちゃったり、逆に一見するとみすぼらしい色に見えても、別の色と組み合わせるとすごく美しい組み合わせに見えることもあります。 そして、色の相性や色に対するセン
月間1000万PVを支える「UIの言葉選び」のためのチェックリスト - クックパッド開発者ブログ
クックパッド ダイエット事業室の田中です。昨年５月からスタートした「クックパッド ダイエット」にリリース当初から携わり、デザインやダイエットニュースの編集を担当しています。 現在クックパッドダイエットのサイトは月間1000万ページビューを超え、「ダイエットといえば『クックパッド ダイエット』」と言われるような世界を目指して、日々、運用・改善に取り組んでいます。 今回紹介するのは、クックパッドダイエットのUIをデザインする時の「UIの言葉選び」の具体的なチェックリストです。 最高のレイアウトでも言葉がイマイチだと台無しに みなさんは、UIの中の「文言（言葉）」をどのようなプロセスで決定していますか？ UIのレイアウトや遷移の方法について熟考する姿勢を持っている方は多いと思うのですが、文言の検証方法については確固たる視点を持っていない方もいらっしゃるのではないかと思います。 UIで王道のレイア
売れるネット広告社が実践している「縦長LP」の構造 4つのエッセンスと7段階アプローチ
ECzine Day（イーシージン・デイ）とは、ECzineが主催するカンファレンス型のイベントです。変化の激しいEC業界、この日にリアルな場にお越しいただくことで、トレンドやトピックスを効率的に短時間で網羅する機会としていただければ幸いです。
薬剤師さんのキャリアについて考えるサイト「ドラおじさんの薬剤師・転職相談室」を公開 | ドラおじさんの薬剤師・転職相談室
こんにちは。yuyan といいます。 いきなりの告知で恐縮なのですが、このたび新しくWebサイトを作りましたので、みなさんに見ていただきたいと思いブログを書きました。 → ドラおじさんの薬剤師・転職相談室 これはどのようなサイトかというと、 「現役の薬剤師と、薬剤師転職専門のコンサルタントが、薬剤師さんのキャリアに関する様々なテーマについて対談をする」 というサイトです。 この記事を書いた理由はもちろん宣伝のためですが、同時に、このサイトを作るうえでどのようなことを考えながら作ったのかということを、読者の皆さんにもシェアさせていただきたいと思っています。 やや長いですが、どうか最後までお付き合いいただけますと嬉しいです。 目次 このサイトを作った理由 ジャンルを「薬剤師」にした理由 サイトの運用方針と、キーワードの攻め方 ごちゃっとしたデザインにした理由 コンテンツ作成に必要な専門家の巻き
PHP: The Right Way
ようこそ 時代遅れの情報がウェブ上にあふれている。そんな情報を見たPHP初心者は戸惑ってしまうだろう。そして、まずい手法やまずいコードが広まってしまう。 そんなのはもうやめよう。PHP: The Right Way は気軽に読めるクイックリファレンスだ。PHPの一般的なコーディング規約、 ウェブ上のよくできたチュートリアルへのリンク、そして現時点でのベストプラクティスだと執筆者が考えていることをまとめた。 大事なのは、 PHPを使うための正式なお作法など存在しない ってこと。 このサイトの狙いは、はじめて PHP を使うことになった開発者に、いろんなトピックを紹介すること。 経験豊富なプロの人にとっても、これまで深く考えることなく使ってきた内容について、新鮮な見方を伝えられるだろう。 このサイトは、決して「どのツールを使えばいいのか」を教えるものじゃない。 いくつかの選択肢を示して、それぞ
CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ
Webデザインをするときに、必ず使うスタイルシート。思うようなレイアウトを作るために、チェックしておきたいブロックレベル要素や、インライン要素のクセみたいなのをまとめてみました。後半はスタイルが反映されない原因のひとつ、スタイルの優先順位についてです。 Attention 記事公開時からいろいろと勉強して、この記事内で紹介している事柄で、間違った解釈をしていたなーと気がつきました。 この記事の中でいくつか追記してありますが、詳しくは、新しく書いた 11月7日の記事：CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ を読んでみてくださいね！ New Post Webサイトをデザイン、レイアウトするのに欠かせないのが CSS（Cascading Style Sheets、スタイルシート）ですね！今では CSS3 が話題を集めていて、CS
保存版！CSS3セレクタの説明書
CSSセレクタについての基礎知識 このブログで何回も説明していますが、念のために説明します。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 セレクタ表の説明には属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 あと親子関係や兄弟関係などもあまり聞きなれないかもしれません。下の階層にある要素との関係が親子関係で、同じ階層にある要素同士の関係が兄弟関係です。 あと、CSS3と聞いて「どうせIE8以下はダメだし使えない」と思う方もいるかもしれませんが、セレクタに関しては簡単に対応できます。 IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」をご参考に。 それ
WordPress で Web製作をしたいけど、PHP はまだちょっと … という人の PHP ガイド
WordPress はとっても便利なブログツール。使い方さえ勉強すれば、HTML や CSSの知識がなくてもWebサイトを作成、運営することができます。そして HTML + CSS を勉強すれば、デザインを自分の好きなように変更することもできます。でも見た目のデザインだけじゃなくて、いろんな機能をつけたりカスタマイズしていくとなると、やっぱり PHP の知識が必要です。WordPress をカスタマイズしたいけど、PHP はまだ ... という人向けに、WordPress と PHP について簡単にまとめてみました。 WordPress は PHP（プログラム言語） + MySQL（データベース） で作られている、人気のブログエンジンです。最近ではブログじゃない一般的な Webサイトを、WordPress で作ってるっていう人も増えてきたように思います。WordPress を使えば、HTM
個人でもサイト立ち上げ時は実施すべき7ステップ - 鈴木です。別館
本記事は移転しました。 約1秒後にリダイレクトします。 リダイレクトしない場合はここをクリックしてください。
How to Create Website Wireframes
2014年8月17日 Webサイト制作, 便利ツール WebクリエイターボックスではWeb制作の応用技術をよく紹介していますが、基本の流れはちゃんと説明していないな…ということで、「連載！実践で学ぶWebサイト制作ガイド」として、実際に1つのサイトを作りながらWeb制作の流れと方法をまとめて書いてみることにしました。この連載企画はブログ開始当初に考えていましたが、2年半ほど忘れてました…。今回は「ワイヤーフレームの作り方」です。これも過去に「Webサイトの骨組み: ワイヤーフレームを素早く・手軽に・美しく制作する」という記事を書いていたのですが、私の使用するツールも変わったので、改めて記事にすることに。 ↑私が10年以上利用している会計ソフト！ 実践で学ぶWebサイト制作ガイド：その3 目標：わかりやすいワイヤーフレームを作成することができる 必要なもの：紙とペン 対象レベル：超初心者OK
CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ
最近改めて CSS の基本、要素の配置、レイアウトについて学習しました。過去に CSS でのレイアウトなどの記事を書いた事があるんですけど、改めて勉強してみたら、いろいろ間違えて解釈していたなー ... っていうか、基本が分かってなかったんだなーと反省 ...。今回は CSS の基本中の基本、視覚整形モデルについてまとめてみました。 Webデザインをする上で、必須とも言えるのが CSS …。このブログ – Webデザインレシピでも、過去に CSS について書いた記事がいくつかあります。最近 … でもないけど、以下のふたつは CSS でのレイアウトについて、いろいろと書いた記事でした。 CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ – 2011年 6月17日 CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め -2011年 4月21日 で
「シングルページ」流行の7つの理由と最新事例まとめ (1/4)
「シングルページ」と呼ばれる、1ページで完結しているWebページを見かけることが多くなりました。シングルページの概要と、CSSフレームワークを使った実際のシングルページの作成を通して、シングルページのデザインの考え方や作成方法の知識を身につけられる連載をお届けします。解説はデザイナーの石嶋未来氏にお願いしました。（編集部） シングルページとは、1ページで完結しているWebページのことです。最近よく見かけるようになりましたね。シングルページのみを集めたギャラリーサイトなどもあり、Web制作に携わっている方であれば一度は目にしたことがあると思います。 シングルページで作られたサイト。左から、モバイルセキュリティソフトウェアのLookout, Inc,（https://www.lookout.com/）、「重陽」ブランドの包丁を製造販売している堺菊守 河村刃物株式会社（http://chouyo
デザイナに知っていて欲しい10個のAndroidのUIルール - ReDo
iPhoneのそれと比較して、よくかっこわるいと評価されてしまうAndroidですが、正しくは「標準UI同士で比べた際にイケてない」のが真実だと思っています。 今現実として、Androidアプリにイケてないものが多いのですが、そもそもデザインを考慮するプロセスが省略されてしまっていたり、時間（コスト）が無いとかそういうこともあったと思いますが、流石にこれだけメジャーなデバイスになってしまうとそれが許される時代は終わってしまいました。 ドットコム全盛期の様なGeocities＋IBMホームページビルダーのデザインがはるか昔にキャハハされた様に、もうそろそろ標準UIで未カスタマイズのAndroidアプリもキャハハされる時代です。 そんな中、効率よくかっこいいUIを構築するために頭の片隅で把握しておくとちょっと幸せになれる、独断と偏見で捻りあげた10個のAndroidのUIルールを紹介します。
MdN Design｜総合情報サイト
スマートフォン 08 リキッドレイアウトのためのベース作り スマートフォンブラウザはデバイスにより解像度が異なり、同じデバイスでも縦向き／横向きで表示幅が大きく違ってくるため、リキッドレイアウトを採用することが多い。ここでは、リキッドレイアウトのベースの作り方を紹介しよう。 制作・文／新家友代（株式会社スタジオ・アルカナ） BROWSER iOS Andoroid 01 リキッドレイアウトとは、一般的にWebサイトの幅を固定せず、ユーザーのウィンドウ幅に合わせてレイアウトを維持できるように柔軟性をもたせる手法を指す。PCサイトのレイアウト方法としては賛否両論もある手法だが、スマートフォンのサイトをデザインする上では基本となる。 なぜなら、iPhoneでは縦、横に持ち変えることでサイト画面も縦横が切り替わるが、縦持ちの幅を基準に固定幅でサイトを作ると横画面では非常に見づらくなってしまう。また
MdN Design｜総合情報サイト
Webデザイン 1-11 表示領域に合わせて可変するリキッドレイアウト リキッドレイアウトとは、ブラウザの表示領域に合わせてコンテンツの幅・位置を可変で表示させるもの。表示環境による違いを最適化し、スマートフォン対応などにも有効だ。 制作・文／栗林 宏之 B's StuDio Browser IE 7over Firefox 3over Safari 4over 01 リキッドレイアウト（可変グリッド）とはブラウザの幅に合わせてコンテンツの表示範囲（位置）を変えつつ、解像度の違いでユーザビリティを損なわないように最適化したレイアウトを維持する表示方法である【1-1】。 【1-1】ブラウザ幅に合わせてコンテンツの表示領域も変わるのがリキッドレイアウト。 02 基本は幅の指定を相対値で指定することとなる。2カラムレイアウトを例にすると【2-1】、まず全体を含むid［wrapper］にブラウザに
ノンデザイナーこそ押さえておきたい! UI/UXが学べる神スライド7選 | Find Job ! Startup
競合に負けないWebサービスをつくるため、UI（User Interface）、UX（UserExperience、ユーザー体験）にこだわるのは、もはや常識。良いUI/UXはチーム全員で考えることが、良いサービスをつくる秘訣です。 エンジニアやWebディレクターも学んで損はしません。もちろん、本職デザイナーの方々にも役立つ7つのスライド厳選まとめです！ 目次 基礎知識 １．UXのためのUIデザイン ２．UX is not UI ３．ククパド美ちゃんと学ぶ！クックパッドのUI改善プロセス：前編 応用編（Webサイト） ４．ククパド美ちゃんと学ぶ！クックパッドのUI改善プロセス：後編 ５．コンテンツで改善する UI デザインの極意 応用編（スマホアプリ） ６．UI＆UX / 重要なのは、毎日さわって嬉しいUI UX! 応用編（タブレットアプリ） ７．ニコニコ超デザイン-
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...