カヤックのHTML5シリーズ第２弾！日頃の運動不足を解消できる？ちょっと贅沢なコンテンツ集。
HTML5杯｜2012年 ブラウザで競う 熱い夏
カヤックのHTML5シリーズ第２弾！日頃の運動不足を解消できる？ちょっと贅沢なコンテンツ集。
良いデザインって？技術を学ぶ前に知っておきたいデザイン・レイアウトの基本的なこと
デザイナーになりたいって思った時にPhotoshopやIllustrator、cssやhtmlを勉強しなきゃな〜><て考えると思うのですが、技術的なことを学ぶ前にまずデザインが出来なきゃ始まりませんよね。 センス？かっこ良さ？奇麗さ？良いデザインにしたいけど、何をしたらいいかわからない。そんな時に何を考えたら良いのかデザインの基本をまとめてみようと思います XD はじめに 良いデザインって？ 最良の方法？ 1.コンテンツの目的 2.ターゲット 3.これらを組み合わせた例 デザインの基本 1.書体について 2.ジャンプ率 3.ホワイトスペースを生かす >ホワイトスペースで情報を分割する >ホワイトスペースで囲む >ホワイトスペースにあえてはみ出す 最後に はじめに デザインという言葉を聞くと、かっこいい、かわいい、おしゃれ、きれい、などと感覚的なものを思い浮かべる方が多いのではないでしょうか
3分でわかる!? クリエイティブライフを実現するための「まとめ300選+α」 | クリエイティブ | SUGO-BLOG
[[ 読了 3分～7日間 ］ 1年のまとめ。 してますか？ たぶん、これからですよね？ Photo credit: smashinghub.com こんにちは。もゆる（@moyulog）です。 今の時期、ソーシャルメディア上では キュレーション（おまとめ）されたコンテンツを やたら目にできると思います。 私だけでしょうか？ 「今年流行った便利なサービスベスト10」とか 「何かを仕掛けるために必要な20のこと」みたいなものです。 そして、この記事も、そんな類の“まとめ記事”です。 しかし、“あとで読む…”とブックマークして その後、読まれることなく一生を終える記事が多いのは 読み手にも書き手にもお互い好ましいことではありません。 そのため、今回のブログは誰に読んでいただきたいのか あらかじめお伝えしておきます。 … 約3分、このBlogを読む時間がある方。 そして、これから自分で何かを“
ディテールの作りこみに役立つ、全75種類のピクセルベースのパターン素材
商用でも無料で利用できる、ピクセルベースのPhotoshop用のパターン素材を紹介します。 パターンはすべてシームレス用に作られています。
Modern Take on Patterned Backgrounds in Web Design - Designmodo
Modern Take on Patterned Backgrounds in Web Design Website ExamplesNataly Birch • September 03, 2018 • 5 minutes READ First, brutal designs then, gradients and now there is another trend from the past that excites creatives. Geometric patterns are becoming a go-to design element. To start, let’s take a look at Trump’s Xmas Meltdown to refresh our memory on past patterns. The background design is u
Webデザイナーならば必ず一度は憧れる、余白が美しいWebデザインまとめ59個
artless Inc. / mount inc. / standardimage他...全60件
お洒落なgifを淡々と貼って行く : まめ速
1：以下、名無しにかわりましてVIPがお送りします：2011/10/10(月) 19:32:30.92ID:WKVFtnuu0 こんな感じの 2：以下、名無しにかわりましてVIPがお送りします：2011/10/10(月) 19:35:39.71ID:WKVFtnuu0 3：以下、名無しにかわりましてVIPがお送りします：2011/10/10(月) 19:36:38.70ID:gi1qSk5L0 うおっびっくりしたー 心臓止まりかけたわ… 4：以下、名無しにかわりましてVIPがお送りします：2011/10/10(月) 19:38:10.74ID:WKVFtnuu0 5：以下、名無しにかわりましてVIPがお送りします：2011/10/10(月) 19:40:30.01ID:WKVFtnuu0 6：以下、名無しにかわりましてVIPがお送りします：2011/10/10(月) 19:42:16.27
iPhoneやAndroidのUIパターンを収集するシンプルで見やすいギャラリーサイト・Patterns of Design
いくつか同じようなギャラリーサイトは ありますが、こちらもなかなか見やすか ったのでメモ。スマートフォンのUIの パターンギャラリーサイトです。スマー トフォンに限らず、通常のWebサイトの パーツデザインの参考にもなりそうです。 特にスマートフォンのUIは細かい部分のこだわりが見られてとても参考になりますので見ておいて損は無いかと思います。 シンプルな作りです。パーツはカテゴリで分けられていて探しやすいです。ちょっと重いかな・・ 例えばこちらはグリッドのカテゴリ。同じ幅、同じ高さという限られた空間の中で、様々な工夫が見られます。 クリックするとその場でLightbox風にポップアップします。iTuneへのリンクもあるので確認しやすいですね。 同じようなギャラリーサイト似たようなサイトは沢山あるので合わせてチェックしてみてはいかがでしょう。 Mobile UI Patternspttrns
今更聞けない？！WEBデザイナーなら最低限知っておきたい有名フォントの数々 | バンクーバーのうぇぶ屋
最近、フォント名を知らないデザイナーが増えてきていると思うんですよね。 実は使ってるんだけど、どのフォントを使っているか意識していなくて、「これ何のフォント？」と聞くと、「ちょっと待ってくださいね。調べます。」という会話を良く耳にするようになったような気がします。「会社のPCに入ってたー」みたいなノリでしょうか。 というわけで、今日は僕がWEB屋をやってきた中で、「最低限、これは知っておいた方がいいんだろうな」と思ったフォントを幾つかご紹介。 英文フォントを中心に、色々有名どころを総当りしていきます。主に僕が仕事で使ったことがある物を中心に紹介していきますね。（順不同、のつもりで僕の好きな順） Helvetica 世界中のデザイナーに愛されるデザイナーフォントと言えばやっぱりHelveticaですよね。 元はスイスのデザイナーによって作られたフォントでMacだと標準フォントのひとつになって
斜めグリッドを使ったデザインのウェブサイト集
ここ最近のことなのですが、綺麗なデザインのサイト集なんかを見て回っていると何度か斜めグリッドを基準にしたデザインのサイトを見かけました。 こういうの何て言うんでしょうね。斜めグリッドなのでDiagonal Grid Based Webdesignとでも言えばいいんでしょうか。 どのサイトも非常にインパクトが強く印象的だったので、数は少ないですが紹介してみようと思います。 Jessica CaldwellJessica Caldwell ポーランドのウェブ制作者さんのポートフォリオ。 各ブロックはli要素をtransform: rotate()して作られています。 ブロックは一つ一つがナビゲーションで、マウスを乗せるとアニメーションでメニューが表示されます。 Designer GlebDesigner Gleb / Graphic&Web Designer Gleb Leksikov フリー
Web制作者は知っておきたいwebサイトのレイアウト7選 │ Design Spice
レスポンシブwebデザインからグリッドデザインまでよく使われているwebデザインのレイアウト用語をまとめました。 レスポンシブwebデザイン エラスティックレイアウト リキッドレイアウト フレキシブルレイアウト 固定幅レイアウト グリッドレイアウト 可変グリッドレイアウト レスポンシブwebデザイン(Responsive Web Design) PCやスマートフォン、タブレット事に複数のデザインを制作するのではなく、 ディスプレイの幅に合わせてデザインを最適化する方法。 CSS3のMedia Queriesを利用してディスプレイサイズに応じてデザインを変更します。 メリット 一つのソースで複数デバイスに対応できるのでメンテナンスが容易です。 また今後デバイスの種類が増えてもそれに対応できます。 それぞれのデバイスに合わせた形で調整できるのでユーザーエクスペリエンスも高くなります。 デメリッ
日本の良デザインなWebサイトのみを集めているシンプルなデザインギャラリー・81-web
とっても見やすかったのと、コンセプト が良かったのでご紹介。日本の良デ ザインなWebサイトに特化したWeb デザインギャラリーサイト・81-web。 大分知られてる様ですが、もっと知られ て欲しいなと思ってシェアしてみます。 まだ最近立ち上がったギャラリーのようです。掲載数もそこそこ充実してきているみたいなので覚えておきたいですね。 ミニマル構成でとっても見やすいです。「81」というのは日本への国際電話の際に使う数字ですね。 検索はヘッダに ロゴ上部にあるボタンをクリックすると上図のようにパネルが展開されます。色やカテゴリでソート出来ます。 Twitterでの評判が表示されてるのは素敵 個別ページには大きなキャプチャと、Twitterでの評判が表示されています。気になるWebデザインに対する他の方の意見を見れる、っていうアイデア素敵ですね。 とにかくシンプルで見やすいのが僕は気に入りまし
WEB標準デザイン、はじめの一歩 ～デザインからマークアップまで～
第6回 岡山WEBクリエイターズのセッション1で発表したスライド内容を全文掲載。第6回 岡山WEBクリエイターズ セッション1『WEB標準デザイン、はじめの一歩 ～デザインからマークアップまで～』 岡山WEBクリエイターズ勉強会でお話した内容を、スライドとともに全文掲載しています。 テキストはあくまで原稿そのままですので、実際に喋った内容とは幾分異なる場合があります。 スライドのPDFをダウンロード 講師概要 SKPRODUCT代表。 デザイン、コーディング、PHPによるシステム構築、ActionScriptを使用したFlashなど、WEB制作全般を行うWEBアーキテクトです。 岡山の大手企業・学校などを中心にWEBサイトと独自に開発したCMSフレームワーク『SEED』の提供を行っています。 本日は、WEB標準デザインはじめの一歩です。 WEB標準というと、技術的なことを想像される方
ウェブデザインのマンネリ化から抜け出したい人のためのリンク集
ウェブサイトでよく使用されるエレメントやデザインのアイデアをコレクションしている、インスピレーションを与えるサイトを紹介します。
【Fireworks】Fireworksでボタン画像を作る8つのステップ | バシャログ。
ボタン画像を作る手順やテクニックは色々とありますが、そのうちのひとつをご紹介します。 使用したソフトは Fireworks8 です。今回は、たった 8 つのステップでそれなりに見栄えの良いボタンが作れるのが特長です。 Step 1 矩形の上にテキストを置いて、準備オッケー。 Step 2 矩形をほんの少し角丸にします。 アールをきつくすると素人っぽい画像になってしまうので注意。 Step 3 矩形の塗りをグラデーションにします。 Step 4 矩形とテキストの間に上記のようなパス（透過率50%）を置きます。 パスは矩形をコピーしてパスにし、ナイフツールでスパっとやると簡単に作れます。 Step 5 先ほど作ったパスのサイズ・位置を微調整して、塗りのエッジをぼかします。 Step 6 そのままだと立体感に欠けるので、最初に置いた矩形にフィルタ：シャドウ（内側）を適用します。 Step 7 テ
はなみち舎 ― 岡山市のレトロモダンな雑貨・和風ファッションのお店
はなみち舎について はなみち舎は東京・大阪・名古屋・京都・九州など各地をふらりと歩いて見つけたちょっと良いもの、和を感じるものを集めたお店です。洋服から小物・アクセサリー・食器・家具など身近に「和」を楽しめる商品を取り揃えております。 住所 〒700-0945 岡山県岡山市南区新保1613-5 電話番号 086-244-7787 営業時間 11:00～18:30 定休日 毎週火･水曜日 お店までの地図 お車でのアクセス ●国道30号線青江南交差点を西へ。歩道橋を抜け、二つ目の信号を左折すぐ。 ●県道児島線下中野交差点を東へ。ＪＲ高架を抜けてから、二つ目の信号を右折すぐ。 バスでのアクセス ●下電バス下中野北停留所 下車徒歩15分 GoogleMapで周辺地図を見る
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS3で影をつける際に役立つ、ドロップシャドウバリエーションいろいろ