Web2.0とは何か?というと、いろいろな解釈に基づいていろいろとあるわけですが、デザインという切り口で見てみるとある共通項が存在することがわかります。 例えばそれは、シンプルなレイアウト、中央に寄せる構図、ちょっとした3次元空間を感じさせる効果、白やパステルカラーと言ったソフトな色調の背景、アクセントには鮮やかワンポイントカラー、アイコンを多用したわかりやすい使ったナビゲーション、大きなフォントなどなどであるわけです。角の丸いテーブルなどはその代表です。 というわけで、Web2.0風なサイトデザインへリニューアルする際に参考となるサイトや、その素材を製作するためのサービスなどを集めてみました。 まず、Web2.0風デザインとはどういうものかについては以下のサイトにまとめられています。先ほど書いたのはこのサイトで触れられていることがメインです。 Current style in web d
class名やid名って付ける時悩みませんか? 今でもボクは結構悩むんですが、そんな悩みを解決する為に、人さまのソース覗きまくってよくあるclass名とid名を拾ってきました。 これで、チョットだけ作業効率アップ!? 2010年6月10日追記: この記事自体、2007年 1月15日に書かれてるんでかなり古いです。 あくまでも参考程度に留めてもらうのが良いかと思います。 今だったら、html5の要素を参考にしたりして付けるのが、今後の事を考えると良いのかなーと思います。 また、善し悪しの判断はせずに公開しているものですが、位置に関するのは仕様変更に弱くなるのでオススメはしません。 全体に使えそうな感じ wrap wrapper top-wrapper wrapperAll frame mframe all-frame container page pagetop all allContent
当ブログが携帯サイト作成法に関する記事をかいていることから、読者の方から、 『モバゲーのような携帯サイトを作るためにはどうしたらいいんですか?』 っていう質問を最近良く受けます。 おそらく、モバゲーがとても有名で、ある種モバゲーが携帯サイト界のデファクトスタンダードのような 位置づけになってきているのでしょうか。 確かに、携帯サイトを作ってきている身としても、 モバゲーのサイトデザインにするには、結構難しいことも多いし、学ぶことも多い。しかし、最近の携帯サイトは、実機からしかアクセスできないようになっていて、PCからコードを覗くことができないことも多く、学ぶことも難しいようです。 ということで、今回は実際にモバゲータウンに携帯でアクセスして、携帯の画面を見ながら、デザインを真似て新しく自分なりに作ってみましたので、そこから得た経験をTipsとして公開したいと思います。 ちなみに、左のスクリ
通常のアイコンよりも小さなサイズの使いやすいミニアイコンを集める必要性に迫られたので、いろいろとリストアップしてみました。 ブログやWiki、通常のサイト作成やFlash、PowerPointのプレゼンテーションやソフトウェアのボタンなどなど、いろいろな場面で役に立つはず。ボタンの画像を違うものにするだけでだけでも、割と雰囲気がガラリと変わるのでオススメです。 リスト一覧は以下の通り。 Mini Pixel Icons(ブログやCMS用のアイコン、ユーザーアイコンなどが多く、とてもカラフル) Mini Icons | urlgreyhot(12ピクセル四方という極めて小さなアイコンがいろいろあります。グレイスケールのアイコンは加工しやすいので、好みのアイコン素材にすることも可能) Bullet Madness - free bullets project at Stylegala(200個
by Alessandro Fulciniti In November 2005 I presented on pro.html.it a three-part article on creating CSS layouts using techniques like negative margins, any order columns and in some case opposite floats. The main goal of the article was getting the maximum number of layouts based on the same markup, each with valid CSS and HTML, without hacks nor workaround and a good cross-browser compatibility.
ラブコメプリンスのパクソジュンに釘付けの日々 韓国のイケメン人気俳優といえば、パク・ソジュン! 2020年に大ヒットした韓国ドラマ『梨泰院クラス』の主演で、更に人気は加速しましたよね。 私も『梨泰院クラス』視聴前から彼の作品は見ていたのですが、どんな役柄でもこなせてしまうなと 強く逞しく 不合理な世界に正面から立ち向かう 血気盛んな若者の反乱 なパク・セロイ(パク・ソジュン)を夢中になって見ていました。 『愛の不時着』と並び日本でも多くの方が視聴されたと思います。 特に『梨泰院クラス』は『愛の不時着』と比べてロマンス色が薄く緻密なビジネスプランなども要素に盛り込まれていたので、男性からも人気の作品でした。 他にも彼の出る作品出る作品がヒットを飛ばしています。 2014年:魔女の恋愛 2015年:彼女はキレイだった 2016年: 花郎<ファラン> 2017年:サム、マイウェイ~恋の一発逆転!
CSSを使ったタブ型の各種メニューとか、CSSによる画像のポップアップとか、ドロップシャドウやページカールの作り方などのコードが実際の例と一緒に置いてあります。実例を見てから選ぶことができるので、希望通りのものが手に入りやすいです。 Dynamic Drive CSS Library- Practical CSS codes and examples http://www.dynamicdrive.com/style/ RSSもあるので新しいコードが追加されればすぐにわかります http://www.dynamicdrive.com/style/csslibrary/rss/ コードの種類としては以下のような感じでカテゴリ分けされています。 横型のメニュー http://www.dynamicdrive.com/style/csslibrary/category/C1/ 縦型のメニュー h
通常のウェブサイトだけでなく、Flashサイトのテンプレートやロゴマークのテンプレート、バナーやボタンまで置いてあります。これらがすべてフリーというのが驚き。全部で200個以上あるようです。 TemplatesBox.com http://www.templatesbox.com/ ウェブサイト用テンプレートは利用したPSDファイルやフォントも同梱されており、DreamweaverかFrontpageで編集しやすいようにできています。 ウェブサイト用テンプレートあれこれ http://www.templatesbox.com/templates.htm ロゴデザインのテンプレートはPSDファイルとフォントファイルが同梱されています。親切。 ロゴデザインのテンプレート http://www.templatesbox.com/free-logo-templates/index.htm ウェブサ
Flash 8 入門講座 目次 お絵描きからActionScriptを使ったアニメーション制作まで いまやすっかり,Web上のインタラクティブ・コンテンツの代名詞となった感がある“Flash”。実は,アニメーションやゲームなど私たちが目にする,いわゆるFlashコンテンツは正確には「Flashムービー(ファイルの拡張子は.swf)」と呼びます。 Flashムービーを作成する方法はいくつかありますが,一般には,アドビシステムズの開発ツール「Macromedia Flash(以下,単にFlash)」を使います。本連載では,Flashの最新版である「Flash 8」を使って,Flashムービーの作成方法を中心に紹介していきます。Flash 8を持っていないという人も,1カ月間タダですべての機能を使用できる体験版がアドビシステムズのWebサイトに用意されているので,ダウンロードして一度試してみては
引用元:web制作板 545 名前:Name_Not_Found[sage]投稿日:03/10/20 20:13 ID:??? 初心者向け ■はじめてのWEBドキュメント作り http://www.asahi-net.or.jp/%7Esd5a-ucd/www/ ■初めてのホームページ講座 http://www.hajimeteno.ne.jp/index.html ■30分間HTML入門 http://kanzaki.com/docs/html/lesson1.html ■ISMT HOME 〜 メモ帳で作る超初心者のHP作成講座 〜 http://ismt.cside.com/ ■趣味のWebデザイン http://deztec.jp/design/index.html HTML/WWW解説 ■好ましいHTML文書を書くための方法と考え方 http://www.asahi-net.
アップル ヒューマンインタフェースガイドライン 原文:Apple Computer Inc. 訳:かろでん☆みゅーあ 2006-06-28 はじめに アップル ヒューマンインタフェースガイドライン序文 アップルは、強力なコアファウンデーション、そしてアクアと呼ばれる、目の離せないユーザインタフェースを結びつけた、世界で最も先進的なオペレーティングシステム、Mac OS X を手にしました。 進化した機能と、美的に洗練された色使い、そして透過処理、アニメーションによって、Mac OS Xは新規のユーザにはコンピュータ操作をより容易に、同時にプロフェッショナルユーザには彼らがMacintoshに期待する通りの生産性を提供します。 ユーザインタフェース、すなわちふるまいと外見は、よく練られた緊密なユーザ体験を、Mac OS X向けに開発された全てのアプリケーションに利用できるようにします。 これ
Web業界のデザイン手法として、密かに流行し始めている「左上の魔術師」理論。 サイトとしての「見栄え」よりも、ユーザーの「目の動き」に着目したWebデザイン手法として注目を浴びています。 今回は、まず始めにWebサイトのデザイン別にユーザーの「目の動き」を解説します。 そして、実際にミリオン単位でユーザーを獲得しているサイトを考察することで、「左上の魔術師」理論を解説したいと思います。 1.カラム別Webサイトデザイン 2.昔はたくさんあったWebサイトデザイン 3.ページ単体を見に来たときのユーザーの目の動き 4.サイト全体を見たくなったユーザーの目の動き 5.ミリオン単位でユーザーを獲得しているサイトのデザイン 6.左上の魔術師とは 1.カラム別Webサイトデザイン 現在のWebサイトの多くは、「1カラム型」、「2カラム型」、「3カラム型」のどれかで構成されています。 このうち「2カラ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く