ウェブデザインにおけるヴィジュアルのバランスを実現する5つの方法とその要因
エレメント同士を水平に配置したり、垂直に配置したり、またそれが対称だったり非対称だったりなど、ウェブデザインでヴィジュアルのバランスを実現する5つの方法とバランスに大きな影響を与える5つの要素を紹介します。 Developing Balance in Web Design [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに バランスの5つのタイプ バランスの5つのプロパティ はじめに もしあなたのウェブサイトのデザインがヴィジュアル的にバランスがとれていないなら、あなたのサイトは混乱に陥っているようにユーザーは感じるものです。そして、心地悪く感じさせるでしょう。 あなたのデザインは魅力的であり、ユーザーにリラックスして見回してもらえるようにするべきです。それを達成する最も良い方法はヴィジュアルのバランスです。 ヴィジュアルのバランスとは、デザインエレメントのバランスをとるだ
[JS]地味なフォームを簡単にかわいらしいデザインにする -Ideal Forms
画像を一切使用せず、既存のフォームをかわいらしいデザインに変更するjQueryのプラグインを紹介します。 チェックボックスのチェックも画像ではないですよ。 Ideal Forms デモ [ad#ad-2] Ideal Formsのデモ フォームの外観は画像は使用せずスタイルシートでデザインされているので、自分用のカラーに変更することも可能です。 デモでは、3つのスタイルが用意されています。 スタイル：Comix Ideal Formsの主な特徴 フォームに美しい外観を与える軽量（14Kb）のスクリプト。 カスタマイズも簡単で、非常に使いやすいです。 画像は必要なく、スタイルシートでデザインを適用しています。 [ad#ad-2] Ideal Formsの実装 ファイルのアップロード 以下の2つをフォルダごとアップロードします。 css/idealForms js/idealForms.js
ページを直接編集できるHTML5ベースのWYSIWYGエディタ「Mercury Editor」:phpspot開発日誌
Mercury Editor - Home ページを直接編集できるHTML5ベースのWYSIWYGエディタ「Mercury Editor」。 起動するとページの上部にツールバーが現れて、ページをそのままWYSIWYGで編集することが可能です。 リンクや動画、画像、テーブルなどの挿入、テキストフォーマットがツールバーから行え、そのまま保存することが出来る仕組みのよう。 編集画面。ページ内のコンテンツ領域のみを編集させることが出来ます。 サーバに保存するにはサーバ側での保存処理が必要みたいで、ここら辺はRailsを使って動かすみたいです。 対応ブラウザは以下。 Chrome 10+ Safari 5+ Firefox 4+ 関連エントリ 軽量でデザインが良いWYSIWYGエディタ実装jQueryプラグイン「CLEditor」 まだまだあったJavaScript製のWYSIWYGエディタコンプリ
MacでWebデザイン、あると便利なアプリ48＋2 | gaspanik weblog
最近Webデザイン系のいろいろなセミナーやイベントに出ると、MacBookなんとかを持ってる方を多く見かけます。で、これからWebデザイナーになりたいなとか、これからMacに変えちゃおうかな？と思ってる皆さんに向けて、Macを使ってWeb制作とかする時にあると便利なアプリをまとめてみました。 「Web制作といえば、AdobeのCreative Suite」みたいな人も多いでしょうが、サブスクリプションプランが始まったとはいえ、いきなりウン十万もソフト含め投資できないこともありますからね（会社が買ってくれるならいいですｗ）。別にそれがなくても、他で代用すれば仕事はできるから大丈夫です。 いま現在MacでWeb制作をしている皆さんには定番なのも多く含まれますが、ちょうどこないだLionデビューして環境整備がてらまとめたので、最後まで流し読むと「え？何それ」みたいなのがあるかもです。 今回は各種
まったくのゼロから、Webデザイナーになる方法 - ウェブデザイナーになるには
この記事は2011年に書いた記事です。2015年に書いた増補改訂版があります。 「Illustrator、デザイン - まったくのゼロから、独学でWebデザイナーになるためのロードマップ【Vol. 1】」（2015年3月） 前にも「独学でWebデザイナーになるのにまずやること」というエントリーをかいたが、簡易的な内容だった。 今回も大筋の考え方はかわらない。Webデザイナーになるには、たくさん作品を作って人にみてもらうことである。 今回はもっと踏み込んで、全くの未経験の人がどうすればWebデザイナーになれるのかの具体的なステップ（行動プラン）をまとめてみたい。すでに学校やスクールでWebを学んでいる人や会社でデザイン部門をあらたに設立したい人にも役に立つだろう。 ステップ１ 制作環境をつくる まず最初にやることは制作環境を揃えることである。以前だと、FAXとスキャナーは必須だったが、いまは
Web制作者は知っておきたいwebサイトのレイアウト7選 │ Design Spice
レスポンシブwebデザインからグリッドデザインまでよく使われているwebデザインのレイアウト用語をまとめました。 レスポンシブwebデザイン エラスティックレイアウト リキッドレイアウト フレキシブルレイアウト 固定幅レイアウト グリッドレイアウト 可変グリッドレイアウト レスポンシブwebデザイン(Responsive Web Design) PCやスマートフォン、タブレット事に複数のデザインを制作するのではなく、 ディスプレイの幅に合わせてデザインを最適化する方法。 CSS3のMedia Queriesを利用してディスプレイサイズに応じてデザインを変更します。 メリット 一つのソースで複数デバイスに対応できるのでメンテナンスが容易です。 また今後デバイスの種類が増えてもそれに対応できます。 それぞれのデバイスに合わせた形で調整できるのでユーザーエクスペリエンスも高くなります。 デメリッ
ユーザに自分ゴト化してもらうための3つの方法 (ユーザビリティ実践メモ)
今回の実践メモでは、WEBサイト上でユーザの購買意欲を喚起するための方法についてご紹介します。 WEBサイトを見ているユーザの購買意欲を喚起するためには、ユーザに商品の購入を『自分ゴト化』してもらうことが重要であることが、これまでの弊社のユーザ行動観察調査から明らかになっています。 本稿では、WEBサイト上での情報提供で、ユーザに『自分ゴト化』してもらうための3つ紹介いたします。 (1)「こんな人にオススメ」という情報を示す 例えば、以下の表現を比べてみてください。 上の例だと、これらの商品が自分に合っているのかどうかをユーザは判断することができません。 しかし、下のように「こんな人にオススメ」という情報を提示すれば、ユーザに「この商品は自分の状況に合っている」と認識させることができ、自分ゴト化してもらうことができます。 (2)商品価格をユーザに実感させる いくら自分の状況に合った商品があ
[CSS]CSS3非対応も配慮、通知パネルをブラウザの上部に配置するチュートリアル
アニメーションでスライドする通知パネルをブラウザの上部に配置するスタイルシートを紹介します。 実装では、CSS3アニメーション対応ブラウザと非対応ブラウザへの配慮もされています。 Pop From Top Notification [ad#ad-2] 下記は各ポイントを意訳したものです。 デモ デモページでは、CSS3アニメーションをサポートするブラウザと非サポートブラウザでの挙動の違いを確認できます。 デモページ ※上部のイエローのパネルです。 CSS3アニメーション サポート アニメーションでパネルがスライド表示され、アニメーションで隠れます。 CSS3アニメーション 非サポート スタティックにパネルが表示され、クローズボタンのクリックで隠れます。 実装：パネルをブラウザ上部に配置 まずは、パネルをブラウザの上部に配置します。 HTML パネルはdiv要素で実装します。 <div id
素人っぽさを感じるWEBサイト5つの特徴 - おかねがない(ﾟ∀ﾟ)ｯ!!
インターネットをしていると、いろんなWEBサイトに出会います。 気になるアーティストのサイトだったり、趣味に関連したサイトだったり･･･ そんな中で 「なんかこのサイト素人っぽい」 って、感じたことありませんか？ でも、「素人っぽい」と感じはしたものの、そのサイトのどこに素人っぽさを 感じたのか、じっくり考えてみることってあまりないのではないでしょうか。 そこで今回は、WEBサイトのどういう点に素人っぽさを感じるのか、 「脱素人っぽいサイト」を目指す私が感じた、「素人っぽいサイト」の特徴を、 まとめてみたいと思います。 （8/19追記） 以下の内容はあくまで素人muggles0812が感じた、個人的な意見であり、該当する項目が あったからといって、必ずしも他の皆さんが「素人っぽい」と感じるとは限りません。 画像処理が甘い せっかく時間をかけて作ったサイトでも、使われている画像の処理が甘いと
MdN Design｜総合情報サイト
「スタッフィング」という単語をご存じだろうか。Web制作業界に身を置く読者ならば、一度は耳にしたことがあるだろう。「スタッフィング」を簡易的に述べるなら、“職場にスタッフを配置すること”だととらえられる。本記事では、これをさらに細かくとらえ「プロジェクトに必要な人員の選出から最終的な成果物をつくり上げるまでの全工程」を表すものと定義しよう。Web制作案件におけるスタッフィングとは「(1)人員の選定」、「(2)人員の配置」、「(3)作業パートのアサイン（割り当て）」、「(4)作業内容の指示」、「(5)検収」の5ステップを通して行われる【1】。 スタッフィングを行ううえでの要点は「それを実行する者が自ら手を動かさないこと」と「他者を指揮することで作業効率を上げ、納品物の質をより高いものにすること」の2点に集約される。Web制作案件でスタッフィングを行う者とは、もちろんWebディレクターのことを
印象に残る名刺の作り方
2013年12月25日 インスピレーション, 名刺 みなさんはどんな名刺をお持ちですか？またはどんな名刺に目を奪われますか？今働いている会社の名刺ではなく、個人の名刺を作ってみたくないですか？どうせ持つならインパクトのあるものがいいですよね！最初の印象をグッとよくする名刺の作り方がWeb Designer Depotで紹介されていたので意訳してみます！ ↑私が10年以上利用している会計ソフト！ Webデザイナー・デベロッパーとして、私たちは紙媒体を利用したマーケティングを見落としがちです。しかし、会議などクライアントと面と向かって会う場合や今後一諸にビジネスをするかもしれない誰かと出会ったとき、印刷物は非常に役に立ちます。名刺を持つことはあなた自身をオフラインの世界で宣伝するとてもいい方法です。 もちろんWebデザインは創造的な分野であるので、名刺にポートフォリオのような、自分のスキルを見
おすすめのデザイン本「THE ESSENTIAL THINGS 100」: DesignWorks Archive
【フリー壁紙】A CANDLE LOSES NOTHING by モンクレールウンアウトレット (12/20) 【フリー壁紙】A CANDLE LOSES NOTHING by ルイヴィトンコピー (01/04) 【フリー壁紙】A CANDLE LOSES NOTHING by コピーブランド (11/11) 【フリー壁紙】A CANDLE LOSES NOTHING by バーバリー 財布 メンズ (08/17) 無料で使える2010年カレンダーのまとめ by 浅見 晴美 (11/29) 毎回、注目のデザイン書籍や写真集、おすすめの本を紹介します。 今回は「THE ESSENTIAL THINGS 100」です。 元BEAMSのクリエイティブディレクターを務めた、LOWERCASEの代表・梶原由景氏が、"生活をアップデートできるモノ"をテーマに厳選したアイテムを紹介した、クリエイティブか
Design works｜新デザインオンラインカジノ 日本語対応
Design Works - デザインワークス姉妹ブログ・DesignDevelopのデザインをリニューアルいたしました。 Designworksの新ドメインでの運用・リニューアルのご報告はさせて頂きましたが、Designworksのリニューアルとともに、姉妹ブログとして運用しているDesignDevelopのデザインも、大幅にリニューアルいたしました!!! Design Worksは、様々な商品やインスピレーションから生まれた新しいデザインを発信し、販売促進に繋げる広告やデザインを作り出しています。大幅にリニューアルしたDesign Worksでは、オンラインカジノ 日本語対応のデザインなど、オンラインの新たな分野にも活動を広げています。最新のH P新デザインとなった姉妹サイトブログのDesign Developと共に、今後もウェブデザインに関する様々な情報をお届けしていきます。 今回、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HugeDomains.com
フリーのWEBサイトテンプレートをダウンロードできる１５サイト:phpspot開発日誌
フリーのWEBデザインテンプレート２５:phpspot開発日誌
http://e0166nt.com/blog-entry-862.html
フリーで使える種類色々３４２種のベクターアイコン集:phpspot開発日誌
macromarionette | 分割による構成についてアレコレ〈色彩構成〉
地球の魅力を体験し感じる「EARTH BEAT ROPPONGI HILLS SUMMER 2010」: DesignWorks Archive