著作権放棄・シンプル・軽量で、iPhoneなどにもレイアウトを調整できるレスポンシブWebデザイン対応のHTML5フレームワーク・Fluid Baseline Grid - かちびと.net
なかなか凄いフレームワークがあったので 反射的にメモ。パブリックドメインという のが何より太っ腹ですねー。自由に使用で きて、シンプルで汎用的、しかも軽量で iPhoneやiPadにもレイアウトを自動調整 するレスポンシブWebデザイン対応のHTML5 フレームワークです。 これ、凄く良い感じです。いいもの全部詰め込んだ、みたいなソフトウェアですね・・・ちゃんと使いこなせるようになりたいかも。 Media Queriesを使ったレスポンシブWebデザイン対応のCSSフレームワークです。3カラム構成で組めるようにもしてあります。マークアップはHTML5+CSS3ですが、jsを使ってIEにも対応してくれています。 以下にざっと特徴を。 著作権放棄(パブリックドメイン) 軽量(CSSは9kb) ベースライングリッドに揃済み グリッドレイアウト対応 iPhoneやiPadなどにも自動でレイアウトを
プロレベルでクオリティの高いWEBサイトレイアウト作成Photoshopチュートリアル集:phpspot開発日誌
25 Excellent Photoshop Web Design Layout Tutorials プロレベルでクオリティの高いWEBサイトレイアウト作成Photoshopチュートリアル集。 かなりクオリティが高くて、１つの仕事としてうけちゃったほうがよいぐらいのチュートリアルが沢山です。 本などでこうしたチュートリアル集を買うと千円以上したりしますから、なんとも有り難いですね。 英語で書かれていますが、英語力も同時に向上させちゃえるという意味では本当にいい教材です。 関連エントリ 立体感がうまく出たWEBサイトデザイン作成Photoshopチュートリアル スタイリッシュなWEBレイアウト作成Photoshopチュートリアル フレッシュなPhotoshop用WEBレイアウトチュートリアル２５ 3Dエフェクトを使った綺麗なグラフィックを作るPhotoshopチュートリアル集
mixiのデザイン変更から学ぶ、ウェブサイトの最小横幅を800px以下にすべき理由 : akiyan.com
mixiのデザイン変更から学ぶ、ウェブサイトの最小横幅を800px以下にすべき理由 2006-02-09 mixiのレイアウトが大幅に変更された。右側にサイドバーが出現して、全体の横幅が大きく広がったのだ。全体の横幅は900pxほどだ。このため、私の環境ではブラウザの横スクロールバーが現れるようになってしまった。以下がその様子だ。 これはユーザビリティ的にかなりよくない状況だ。横スクロールは可能な限り避けなければならない。なぜなら多くのユーザーは横スクロールすること自体に不慣れだから。 しかし、画面を見てお気づきの方もいると思うが私はWindowsのタスクバーを縦に配置している。このレイアウトはマイノリティな類であろう。このレイアウトのためにブラウザの横幅が縮まっているので「それは例外だ。みんなブラウザの幅は900px以上にしてるよ」という声が聞こえてきそうだ。しかしこれには反論の余地があ
Google I/O 10で発表された5つのAndroidのApplication UIデザイン - 酢ろぐ！
未だにピンとくるAndroidアプリのUIが思いつきません。AndroidではアプリのUIに統一感が無く、メーカー製のアプリも標準アプリとは異なるデザイン感のUIになっています。 普段仕事ではiPhone、プライベートではWindows Phone7とそれぞれの世界観があるプラットフォームで開発を行っているので、ある程度定石というか及第点を貰える様なUIを提案出来るようになっておきたいわけです。 UIの統一性がないのはWindows Mobile自体に苦労してきたので悶々と悩んでいます。この頃Facebookや勉強会の懇親会でAndroidのアプリUIのベストプラクティスについて質問する事が多くてすみません・・・ 色々と探していると、FacebookやTwitter for Androidでも採用されていると思われる5つのAndroidのApplication UIデザインガイドを見つけま
私がwebサイトのラフデザインを制作する時の流れ │ Design Spice
私がwebサイトのラフを作る時の流れを書いてみました。 独学で身に付けた方法であり、 一般的な方法ではないかも知れないことを予め断っておきます。 私にはやりやすい方法ですが、 他の人にとってはそうではないかもしれません… 本エントリーはラフデザインのみ注力するため、既にコンセプト、ターゲット、サイト構成などは決まった状態と仮定します。 （※本文中のショートカットキーは全てMacの場合です） 希望デザインのヒアリング ※委託業務の場合です どんなデザインが希望かを先方にヒアリングします。 この時にできるだけ、クライアントのイメージを明確にするため 抽象的でも良いので沢山言葉を貰います。 明るい、可愛い、ポップ、カッコいい、シンプル、落ち着いた…etc 具体的にデザイン参考にしたいサイトがあるのなら聞いておきます。 また頂いた言葉と自分のイメージのギャップを埋めておきます。 ”シンプル”と言う
Webデザインにおける、1pxへのこだわり
☆ご注意☆ この記事は 2011年6月5日 に書いたものです。情報が古い可能性がありますのでご注意ください。 私も少しですがこの「1pxのこだわり」を日頃のデザインで使えるようになってきたので、制作方法とともにちょっとまとめてみました。 引き出しのひとつとして、デザイン勉強中の方、参考にしてもらえるとうれしいです＾＾ デザイン上級者の方々にとっては当然のことだと思うのですが、 最近つくづく思うのが、「1pxで質感が全然変わるよなぁ～」ってとても感じます。 たった1pxでピリッとしまったり、見やすくなったり、しゅっとなったり、、、と、1pxをないがしろにしちゃいけないんですねー… 今回は、私がデザイン制作時よく参考にしている、 デザイン参考集、bookma!さんの中から、色んなサイトを調べてみました。 目次 仕切り線の1px 文字をキリッと見せるための1px 動きのある1px 1pxの枠 仕
「素人っぽいデザイン」から抜け出すために、デザイン制作時に心がけたい5つのポイント
☆ご注意☆ この記事は 2011年5月29日 に書いたものです。情報が古い可能性がありますのでご注意ください。 今も素人にちょびっっっとだけ毛が生えた程度ですが、 少しだけわかるようになりました。 毛の生えた私からツルツルの私へのダメだし Webデザイナーなりたてのころ、デザインのチェックをしてもらったとき、 「んーーーなんかこのへん素人っぽいね」と言われた事があります。 素人っぽい。。。？？？(゜д゜) そのときは何だろう、どんなのが素人っぽいんだろうとわかりませんでした。 就職はできたものの、技術は完全ど素人なので。 今も素人にちょびっっっとだけ毛が生えた程度ですが、 少しだけわかるようになりました。 「素人っぽい」の意味が。 毎日、たっくさんのWebサイトを見ますが、プロのデザイナーが作ったと思われる、構成もデザインもしっかりしたサイトもあれば、お店の人が一生懸命手作りしてそうなサイ
「あの花」オリジナルフォント めんまフォントプレゼント | あの日見た花の名前を僕達はまだ知らない。| アニメ公式サイト
「あの日見た花の名前を僕達はまだ知らない。」モバイル公式サイト：www.anohana.jp 限定キャラクター待受プレゼント めんまの直筆文字をフォントにしました。 「あの花」オリジナルフォント「めんまフォント」はウィンドウズでもマックでも使えます。 横書き・縦書き対応のTureTypeフォントです。 入力可能な文字 すべて全角文字です。 ひらがな／カタカナ／数字／記号(一部) 対応OS Windows 95／98／Me／NT4.0／2000／XP／Vista／7 、Mac OS X 10.3以降 使用方法 ダウンロードされたファイルはzip圧縮されていますので、解凍してご利用ください。 解凍方法、インストール方法などについての個別の質問にはお応えできません。 利用規約 フォントの著作権は、「あの花」製作委員会に帰属します。 フォントのご使用によっていかなる損害が生じ
かっこいいロゴ貼ってけ : 暇人＼(^o^)／速報 - ライブドアブログ
かっこいいロゴ貼ってけ Tweet 1：名無しさん＠涙目です。(大阪府)：2011/05/26(木) 22:14:12.32 ID:a6ejwfmC0● 東日本大震災：支援のロゴ、自由に使って！ 岡山市がＨＰにアップロード 岡山市は２５日、東日本大震災復興支援市民キャンペーンのロゴマークをホームページで自由にダウンロードできるようにする。 支援の輪を広げる目的。同市によると、行政が作ったロゴを自由に使えるようにするのは珍しいという。 ロゴマークは４月に作成。「がんばろう日本！ 岡山の元気をとどけよう」の文字と桃太郎をあしらっている。 キャンペーンの趣旨に賛同する市民や企業であれば、使用できる。デザインや文言の変更、商用目的は不可。市への申請も不要。 市は「市民挙げて被災地を応援できれば」と話している。ホームページのアドレスはｈｔｔｐ：／／ｗｗｗ．ｃｉｔｙ．ｏｋａｙａｍａ．ｊｐ／。 掲載は来
着眼点の素晴らしいパッケージデザインまとめ「Inspiring Product Packaging Design Ideas」: 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) 製品提供の際に必ず必要になるパッケージは、そのデザインによって製品の第一印象を決定づける重要な要素ではないでしょうか？そこで今回は、細部まで計算されて商品の特徴を的確に捉えた、着眼点の素晴らしいパッケージデザインまとめ「Inspiring Product Packaging Design Ideas」を
見ているだけでも楽しい、ネガティブスペースを使ったロゴデザインのまとめ
ネガティブスペースとはホワイトスペース（空白）としてもよく知られており、コンテンツに占拠されていないエリアのことで、特定のアイテム間のスペースであるとも定義できます。 そんなネガティブスペースを巧みに使用したロゴデザインを紹介します。
ウェブデザインで効果的に半透明とオーバーレイのテクニックを使う方法とその実例
半透明とオーバーレイのテクニックは効果的に使用すると、奥行きとリアリズムを作り出し、退屈なウェブデザインにモダンな印象を与えます。 Onextrapixelから、ウェブデザインにおいて効果的に半透明とオーバーレイのテクニックを使う方法とその実例を紹介します。 Opacity and Overlay Techniques in Web Design [ad#ad-2] 下記は各ポイントを意訳したものです。 Dark Overlay Light Overlay Color Mixes Dark Overlay ブラック、あるいは暗いグレーを使ったオーバーレイ。最近のウェブデザインでよく見かけるタイプです。見た目はスタイリッシュになり、画像やスライドショー、ナビゲーションなどによく利用されています。 このテクニックを利用する際は、CSSでの透過をサポートしていないブラウザがまだあるため、PNGで
オススメのフリーグラフィックソフト:アルファルファモザイク
編集元：ＣＧ板より「オススメのフリーグラフィックソフトpart8」 1 名無しさん＠お腹いっぱい。 :2007/05/07(月) 14:56:19 ID:OKk9FweZ ▼リンク集 http://toolseeker.hp.infoseek.co.jp/freeware_link.html ▼テンプレ・既出ソフトリスト http://fpaint.web.fc2.com/index.html ▼過去スレ オススメのフリーグラフィックソフトpart7 http://pc11.2ch.net/test/read.cgi/cg/1149343644/ オススメのフリーグラフィックソフトpart6 http://pc8.2ch.net/test/read.cgi/cg/1132835446/ オススメのフリーグラフィックソフトpart5 http://pc8.2ch.ne
WEB標準デザイン、はじめの一歩 ～デザインからマークアップまで～
第6回 岡山WEBクリエイターズのセッション1で発表したスライド内容を全文掲載。第6回 岡山WEBクリエイターズ セッション1『WEB標準デザイン、はじめの一歩 ～デザインからマークアップまで～』 岡山WEBクリエイターズ勉強会でお話した内容を、スライドとともに全文掲載しています。 テキストはあくまで原稿そのままですので、実際に喋った内容とは幾分異なる場合があります。 スライドのPDFをダウンロード 講師概要 SKPRODUCT代表。 デザイン、コーディング、PHPによるシステム構築、ActionScriptを使用したFlashなど、WEB制作全般を行うWEBアーキテクトです。 岡山の大手企業・学校などを中心にWEBサイトと独自に開発したCMSフレームワーク『SEED』の提供を行っています。 本日は、WEB標準デザインはじめの一歩です。 WEB標準というと、技術的なことを想像される方
Webデザイナーが知っておく、DTPの基礎知識
Webデザイナーが知っておく、DTPの基礎知識 2011-05-08 CMYK RGB(加法混色)で表現される色を、塗料や染料では全ての色を再現できないため、印刷する場合はCMYK(減法混色)ににする必要があります。 CMYKは、シアン（Cyan）、マゼンタ（Magenta）、イエロー（Yellow）、キー・プレート（Key Plate）から成っており、シアン、マゼンタ、イエローの三色で理論上、黒も表現できますが、実際は強く表現されないためブラックを補ったCMYKが使用されています。 しかしCMYKの黒でも本当の黒には見えません。 そこで他の色も混ぜて、本当の黒に近づけることをリッチブラックといいます。 印刷会社によっては推奨されているリッチブラックの濃度もありますが、C30%＋M20%＋Y20%＋K100%で問題ないと思います。 入稿時にはCMYKの色指定を、5%刻みで指定する様にするよ
throw Life - Androidアプリ開発者に絶対オススメのレイアウト本「Android Layout Cookbook」
開発者A 「Androidアプリを開発しています。アプリも作れるようになりました。でも…見た目がカッコ良くならないんです。」 開発者B 「デザイナーさんがカッコいいUIモックを作ってくれたんです。でもそれAndroidでは実現できませんからぁ。」 開発者C 「デザインなんて感性でしょ？プログラマには関係ナイナイ」 というダメっ子達。@yanzm譲直伝の書「Android Layout Cookbook」を読むべし！ 脇からえぐり込むように読むべしッ！ というこで、最近あしたのジョーにスッカリとドップリな私adamrockerが「Android Layout Cookbook アプリの価値を高める開発テクニック」のレビューをお届けしますジョォーー！
Android 2.1アイコン作成方法 3つのポイント - ひつじのにっき
ADF2010 LT Android開発Tipsの後半です。お待たせしました。 Android DeveloperのIcon Design Guidelines, Android 2.0が原典です。 英語ですがデザインについて大変参考になります。 以下を読んで興味を持ったひとは是非、読んでみて下さい。 ランチャアイコンのデザインポイント アイコンの推奨サイズ 綺麗に見せる便利ツール"Draw9patch" ランチャアイコンはアプリの顔 Androidアプリケーションの顔といえるアイコンですが、意外に苦労している人が多いはず。 アイコン作成のポイントを紹介します。 (Style Do's and Don'ts)より 図はグッドプラクティスとバッドプラクティスの比較です*1 Android2.0で良いとされるアイコンでは以下の3つのポイントがあります。 モダンなデザイン あまり古くさくしないこ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
細みでスタイリッシュなフリーフォント50
http://www.samurai-logic.com/inkscape2/cat18/cat19/
CSSの知識をもっと深める30+2の小技テクニック集｜Webpark
