無料でスタートアップ企業っぽい素材写真をゲットできる「Startup Stock Photos」
キレイに整ったオフィスやミーティングの様子など、いかにもスタイリッシュな「スタートアップ企業」のイメージが漂う素材写真を無料でダウンロードできるサイトが「Startup Stock Photos」です。 Startup Stock Photos http://startupstockphotos.com/ 画像のダウンロードはカンタン。各画像の下部にある「Download」をクリックすると別ウィンドウで画像が開くので、あとはローカルに保存すればOKです。 ブレインストーミングっぽい雰囲気の写真や…… いかにもな雰囲気のデスク周り 会議をちょっと離れたところから眺めた写真 クリーンに整えられたデスク その他にも、いろいろと使えそうな写真がそろっていました。 なお、Startup Stock Photosでは定期的に新しい写真が追加されている様子。ページをスクロールしても全ての写真を確認するこ
WYSIWYGエディタでCSSを作成できるサイト「EnjoyCSS」 | ライフハッカー・ジャパン
「EnjoyCSS」はWYSIWYGエディタでCSSを作成できるサイトです。ボタンやフォーム、テキストなどのデザインをWYSIWYGエディタで行うことができ、作成したものをCSS3でダウンロードすることができます。 以下に使ってみた様子を載せておきます。まずEnjoyCSSへアクセスしましょう。ボタンやフォーム、テキストなどいくつかのカテゴリに分かれているので、作りたいものを選びましょう。今回はボタンを作ってみます。 こちらがエディタです。左側にプレビューがリアルタイムで更新されます。右側にはTransitionや背景、影、余白などを設定できますよ。 編集が完了したら右上の「Get the code」からCSS3でダウンロードできますよ。CSSでボタンやフォームなどを作りたいときにぜひご活用ください。 EnjoyCSS （カメきち）
閲覧者の印象に残る、赤を基調としたウェブサイトデザイン35パターン
パッと見ただけで閲覧者の印象に残りそうな、「赤」を基調として構成されているウェブサイトデザイン35パターンです。赤は印象的な分だけ上手に使わないとサイトの見た目がうるさくなってしまいがちですが、うまくまとめることで魅力的なウェブサイトデザインを作り出せます。 A Round up of Red-Colored Websites Design 1：Cafe Rouge 赤い鍋と背景がよくマッチ。 2：MetroStation 小ぎれいにまとまっているウェブサイトデザイン。 3：Intensity in Ten Cities ロケットが印象的です。 4：Grafik さまざまな濃さの赤が使われています。 5：Northern Classics 背景が暗めの赤。 6：New Hampshire Distributors, Inc. 渋めの赤によってどこか落ち着いた高級感のある雰囲気に。 7：Th
無料で商用OKなマンガの吹き出しにも使える明朝体かな＆ゴシック体漢字フォント「やさしさアンチック」
「M+（エムプラス）フォント」「IPAex明朝」「IPAexゴシック」の3種類のフォントを合成しオリジナルの文字を加えて加工することで、マンガの吹きだしや辞書の見出し・絵本などで利用される明朝体かなとゴシック体漢字が組み合わされた独特のフォントとなっているのが「やさしさアンチック」です。フォントは印刷物およびデジタル・コンテンツにつき商用・非商用に関わらず利用可能です。 フリーフォントやさしさアンチック（漫画用書体）のダウンロード | フォントな情報。オープンソースの安心フリーフォント http://www.fontna.com/blog/1122/ コミック用アンチックフォントはアンチゴチとも呼ばれる、明朝体とコミック体が組み合わされた太めの書体のことです。通常のアンチック体よりも太みの差が少なく、漢字との統一性が高いデザインで、全体の印象はスッキリと風通しのいいものとなっています。 実
Tumblrで同人音楽CD特設サイトが簡単に作れるレスポンシブなテンプレート「Tokusetsu」
HTMLの知識を必要とせず、フォームに情報を入力していくだけで同人音楽CD特設サイトが完成するTumblr用のテンプレートが「Tokusetsu」です。 ヘッダ画像・ジャケット画像・ソーシャルボタンの有無・背景画像・フォントをカスタマイズでき、テーマカラーも白・黒の2種類から切り替え可能、タブレットやスマートフォンの閲覧にも対応したレスポンシブデザインとなっており、SoundCloud/YouTube/ニコニコ動画の貼り付けに対応、お知らせページやZIPファイル配布ページに使える固定ページを何個でも作成でき、ページへのリンクは自動的にヘッダに追加されるので管理が簡単、しかもFacebookなどのSNSでシェアされやすくなる OGP（Open Graph Protocol）があらかじめ設定してあるという親切設計となっており、かなりよくできています。 Tokusetsu - 同人音楽CD特設サ
ウェブ業界で流行しているフラットデザインの利点と欠点
Windows 8のUIやGoogleのアイコン、Appleの新しいiOS7、さらにはFirefox 23のアイコンにまで使われているフラットデザイン。そんなフラットデザインがインターネット上で流行しているのかどうか、このデザインの特長は一体どういった点なのか、ということを実際にウェブ業界で働くプロ100人に対して調査したレポートが公開されています。 Flat Web Design Is Here To Stay - The Usabilla Blog http://blog.usabilla.com/flat-web-design-is-here-to-stay/ 調査はウェブ業界で働くプロフェッショナル100人に対して行われました。調査対象者の職業は以下の通りで、ウェブ業界で働く人々をまんべんなく調査しています。 調査の参加者にフラットデザインについて最初に思い浮かぶ単語を尋ねると、以
見ているだけで楽しめる、オシャレで創造性にあふれたメールフォーム32選
通販での会員登録の際などに名前やメールアドレスといった個人情報を入力することになる「メールフォーム」ですが、ウェブサイトのデザインに比べてあまり凝っていないような気がしている人も多いのではないでしょうか。 ここでは、見ているだけで楽しめるような、オシャレで創造性にあふれたメールフォームを32種類集めています。どのサイトもデザイン性に優れているので、これなら面倒になりがちなメールフォームの入力作業も退屈せずに済みそうです。 メールフォーム32選は以下から。01：ArtFlavours 02：VISMAAd 03：Christian Sparrow 04：Justdot 05：The Spray Studio 06：Ryan Scherf 07：Sandalias XTR 08：SVN2FTP 09：Wing Cheng 10：Denise Chandler 11:Needle 12：fabr
ユーザーインターフェースの質を高める手法「ユーザーはヨッパライ法」とは
PCを操作するキーボードやタッチパネル、自動車を運転する時のハンドルやペダル類、あるいはウェブページの操作画面など、ユーザーが何かを操作したり情報をやりとりする際に触れる部分は総称してユーザインタフェース(UI)と呼ばれており、その仕上がり具合によっては製品の評価が大きく左右されることもあります。製品企画をおこなう際には重要な項目の1つとなっているUI設計ですが、特にウェブサイトにおけるUI品質を高めるための手法がYouTubeで公開されています。 The User is Drunk - YouTube 優れたユーザーインターフェースデザインの手法について語るのはウィル・デイブルさん。オーストラリア・メルボルンのウェブコンサルタント企業であるSquareweaveを率いる1人です。 デイブルさんが唱える手法とは、「ユーザーはお酒に酔っ払っている」と仮定してインターフェースを設計する「The
ウェブサイトの使い方を目の前でアニメーションして説明するスクリプトをどんなサイトにでも埋め込める「Embedded Help System」
目の前でマウスカーソルを動かして説明すると理解してもらえるという場合に使えるのがこのjQueryのプラグインとして動作する「Embedded Help System」です。どのようなサイトにでも埋め込んで使うことが可能となっており、最大の特徴は実際のフォームやチェックボックスなどを操作する様子を目の前で見せてくれるという点。 一体何を言っているのかわからないと思いますが、これは実際に目の前でデモを見てもらうのが一番わかりやすいです。 デモは以下から。 Embedded Help System http://embedded-help.net/ デモを見るにはこの「Usage」ページにまずはアクセスします。 次に「Search database」をクリックするとこのようにしてクリックして使う順番の数字がふわっと浮かび上がります。これだけでも割とわかりやすいのですが、ここからが真価を発揮すると
無料で総額7900円以上の画像・BGM・テンプレートなどがダウンロードできる2013年2月版Envato素材シリーズ
3DCGモデル・Flashファイル、BGMやサイトテンプレートなど企業や公式サイトが使うようなハイクオリティな素材の有料販売サイトを運営しているのがEnvatoです。Envatoが運営するこれらの素材販売サイトでは毎月1つだけ無料でファイルがダウンロード可能になっていて、2013年2月は写真素材・音楽ファイル・jQueryプラグイン・3Dモデルなどが無料でダウンロードできるようになっています。早速試してみたところ、総額7900円以上のファイルが無料でゲットできました。 まず無料ファイルのダウンロードにはアカウント作成・ログインが必要なので、まずは以下のページを参照して無料アカウントを作っておきましょう。 無料で商用利用可の有料サイトテンプレートファイルを「ThemeForest」からダウンロードする方法 - GIGAZINE http://gigazine.net/news/2010122
抜け出せない無限ループ！ 止まった世界を動く画像｢シネマグラフ｣が凄い…。
抜け出せない無限ループ！ 止まった世界を動く画像｢シネマグラフ｣が凄い…。2014.02.17 19:007,002 小暮ひさのり 決して冷めないコーヒー。 こちらのコーヒーは動画ファイルではなく、写真を動かした画像。いわゆるGIFアニメなのですが、まるで本当に湯気が立っているような錯覚に陥りますよね。このような写真の一部だけをループさせて動かすような演出を｢シネマグラフ｣っていうようです。 止まっていて、でも動いている。 一度見てしまうと、何故か目が離せない。そんな不思議な魅力のあるシネマグラフをいくつかご紹介していきましょう。 好き…嫌い…好き…。少女の花占いに結果がでる日はくるのでしょうか？ 祭りの夜、ふと自分について考える。 まるで、催眠術をかけられているような。 凍った世界に気付かず新聞を読む。 ずっとふたりで。 ごはん？ ごはんです？ ごはんですかこれ？ リンク先にはもっとたく
文字の上にカーソルを置くだけでフォント名が分かるChromeの拡張機能「WhatFont」
ウェブサイトはレイアウトや文字の選択で雰囲気がガラっと変わるため、人目を引くウェブサイトが使っているフォント名・文字サイズ・文字の色などは気になるところです。文字の上にカーソルを置いたりクリックしたりするだけでフォントの種類や詳細が分かるGoogle Chrome拡張機能が「WhatFont」で、気になるウェブサイトのデザインの秘密が簡単に分かるようになっています。 WhatFont Tool - The easiest way to inspect fonts in webpages « Chengyin Liu http://chengyinliu.com/whatfont.html Chrome ウェブストア - WhatFont https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpml
文字を入力するだけですぐにそれっぽいデザインのロゴ画像が完成する「Squarespace Logo」
文字を入力すれば一瞬でロゴ画像が完成し、用意されている複数の素材を駆使すれば簡単にそれっぽいデザインのロゴ画像を作れるのが「Squarespace Logo」です。作成したロゴは名刺やウェブサイト用のロゴとして使ったり、TwitterやFacebookなどのプロフィール画像にしてもよさげで、スタイリッシュなロゴからかわいらしいロゴまでさまざまなタイプのロゴの作成ができます。 Squarespace Logo — Squarespace http://www.squarespace.com/logo Squarespace Logoでロゴ画像を作る際は、トップページの名刺についている黒枠部分にロゴに使いたい文字を入力し、横にある矢印アイコンをクリックするだけでOK。 これでロゴが完成！ いかにもそれっぽいロゴが、恐るべき速度で完成してしまいました……。 作成したロゴはそのまま使用してもいいの
無料で商用利用可な2400種類のアイコン集「Farm-Fresh Web Icons」
「FatCow」というウェブホスティング会社が無料で提供しており、中身は16×16と32×32の2種類のサイズのPNG形式画像によるアイコン集となっており、その数は実に2400種類となっています。 2400 Free "Farm-Fresh Web Icons" by FatCow Web Hosting http://www.fatcow.com/free-icons これが全部のアイコン画像、ものすごい数です どのファイル名のアイコンがどのアイコン画像なのかという対応表は以下にあります。 なお、ライセンスは「Creative Commons Attribution 3.0 License」となっており、オンラインサービスや各種テンプレート、テーマ、ソフトウェアなどでの商用利用もOKとなっています。また、利用する際にはhttp://www.fatcow.com/free-iconsへのリ
無料で商用利用も可能だが見る者を圧倒して威圧する「ゲバ文字フォント」
ゲバ字とは「当時、大量のビラを作成するのに謄写版が使われていた。そのため、筆跡で身元が割れてしまう可能性があり、公安警察や敵対党派の追及をかわすために開発されたものといわれている。ビラの他に立て看板や党派のロゴとしても使われた。それとは別に、戦前の無産政党や共産党が使っていた書体からきているという説もある」ということで、ある特定の物騒かもしれない目的や活動などに使われるあの文字ですが、それが簡単に作れるフォントが配布されています。 moyu at himote.org - ゲバ文字フォント http://gebamoji.org/~moyu/archive/economist.htm 用意されている文字の見本はこんな感じ 漢字になってくると一気にそれらしくなってきます で、なぜか用意されている文字の中に「萌」があるのが不思議です。 なお、配布元サイトには以下のように書かれています。 ゲバ文
WordPress.com公式ブログで紹介された秀逸なデザインと機能のテーマ27選
ニューヨークタイムズのブログ「NY Times Blogs」やSCEA公式のプレイステーションブログ「PlayStation.Blog」でも採用されているオープンソースで無料利用可能なブログ/CMSソフト「WordPress」の魅力として、豊富なデザインが揃った各種テーマの存在と、それらを簡単に切り替えることでブログの雰囲気をガラッと変えることができるという点がありますが、あまりにも数が多すぎてどれを使えばいいのか選ぶだけでも一苦労。 そこで参考になるのが、スパムコメントやトラックバックを止めるプラグイン「Akismet」で有名なAutomatticが運営しているブログサービス「WordPress.com」公式ブログで紹介されている各種テーマです。 百聞は一見にしかず、実際にどういう秀逸なデザインのテーマがあるのか、実際に選んでみた一覧は以下から。 Blog - WordPress.com
フォントやレイアウトで人にいい印象を与え好意的に文章を読んでもらう方法
画像や文章のレイアウトはウェブサイトをデザインする時だけではなく、資料やポスターなどを作成する時にも必要になりますが、正しいフォントの選択やレイアウトは文章を読みやすくするのに加えて、人の脳に作用し読み手を心地よくさせます。ということで、以前記事化した「自分のアイデアをアプリ化するための予算を自動計算してくれるウェブサービス『How Much Does It Cost To Make An App？』」を提供しているooomfの創設者・Mikael Choさんが、すぐにでもできる効果的な文書の作成方法をまとめています。 The science behind fonts (and how they make you feel) | ooomf blog https://ooomf.com/blog/the-science-behind-fonts-and-how-they-make-you-
ロゴをどのようにデザインしたかという作り方がスケッチで分かる11の事例 - GIGAZINE
ロゴ画像を作るというのはなかなか骨の折れるクリエイティブな作業であり、しかもその製品やサービス、企業のアイデンティティというものを込めなければならず、しかも今後の「顔」にもなるので、その苦労は並大抵ではありません。そのため、実際にロゴが生み出されるまでの過程を知っておけば、ロゴをデザインする際、あるいはロゴデザインを発注する際にいろいろと役立ちます。 11 Great Examples Of How A Logo Is Born | Top Design Magazine - Web Design and Digital Content http://www.topdesignmag.com/11-great-examples-of-how-a-logo-is-born/ ◆Kaviartの場合 完成 ◆Houdiniの場合 完成 ◆Project Moonの場合 完成 ◆Xokoの場合
エントリーに無駄な画像を入れるのは止めて欲しい - Hagex-day info
どもどもHagexです。最近ToDo管理ソフトのRemember The Milkを1年ぶりに使い始めたんですが、ToDoがあまりにも多すぎて、見ているとイヤになってきました（涙）。 そしてついつい現実逃避でWebページの閲覧に逃げてしまうのですが、最近、記事やエントリーに意味のない画像がやたら入っているサイトが増えてきたような気がします。アイキャッチ用に1点ぐらいならわかるのですが、3点以上入ってるとアホじゃないか？ と思っちゃいます。 例としてですが、こんな感じのページです（某大手サイトのエントリーを取り上げましたが、似たようなサイトはたくさんあります）。 本文に6つも画像が入ってますが、ぜんぶ内容と関係ありません。すべてイメージ図です。なぜこんなに意味もない画像をいれるのか？ 理由として考えられるのは…… （1）サムネイル表示用のアイキャッチ（正当） （2）少ない文字量を多く見せる（
無料で商用利用OKなお買い物アイコン250種類詰め合わせパック「The ultimate free eCommerce icon pack」
円などの単位マークや買い物カート・プレゼントボックス・ディスカウントの印といった定番のお買い物アイコンからインターネット上で買い物を行うeコマースで使えそうなQRコード・スマートフォン・タブレット・ダウンロードのマークなど250種類の商用無料アイコンがセットになっているのが「The ultimate free eCommerce icon pack」です。 The ultimate free eCommerce icon pack by Freepik & WooThemes http://www.woothemes.com/2013/06/freepik-free-ecommerce-icons/ 買いものカートや電卓、ドル・ユーロ・ポンド・円といった単位のマークなど、商品販売サイトなどで利用できそうなアイコン250種類は以下から。 実際にスマートフォン画面にアイコンが表示されるとこんな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
