Web制作者は絶対チェックしておきたい、デザインやコーディングに取り入れていきたい便利なツールのまとめ
Webサイトのデザインやコーディングは、やるべきタスクが年々増えてきました。それらの手間がかかる面倒な事が楽にできるツールやアプリも年々リリースされています。 これからのWeb制作にどんどん取り入れていきたいツールやアプリを紹介します。 Adobe Experience Design(Adobe XD) Adobe XDはWebサイトやスマホアプリのデザインやプロトタイプを作成するベクターベースのツールで、PhotoshopやIllustratorともスムーズに連携して利用することができます。 以前は「Project Comet」の名称で発表されていた新ツールが、2016年3月に「Adobe Experience Design(Adobe XD)」としてプレビュー版が公開されました。現在はOS X版のみですが、2016年後半にはWindows 10への対応も予定されています。
Primer - GitHub製。みんなで使えるデザインフレームワーク MOONGIFT
企業やプロジェクトによってデザインガイドラインは自ずと必要になってきます。それが社で働くデザイナーの共通認識になる訳ですが、例えばFacebookアプリを作る際にはボタンやデザインをFacebookっぽくしたくなるのではないでしょうか。つまりデザインガイドラインは社内だけでなく社外の人にとっても有益なのです。 そこで登場したのがPrimerです。PrimerはGitHubが作り、使っているデザインガイドラインになります。 Primerの使い方 スクリーンショットを多めで紹介します。まずはグリッド。 ヘッダー。h1〜6まで対応。 テキスト。若干小さめ？ インラインテキストの装飾。 ボタン。ここはGitHubっぽいですね。 ボタングループ。こういうのもGitHubで使われていますよね。 フォーム。シンプルです。 フォームグループ。縦に並べる時に使えます。 メニュー。アイコンはオプションです。
ロゴをデザインする時に役立つ！便利なオンラインサービス・無料素材のまとめ23選
個人ブログでも企業サイトでも新しいサービスを立ち上げる時に重要なのは、ロゴのデザインです。ロゴの作成は、デザインセンスがある人には簡単な作業でも、デザインが苦手な人にとっては悪夢かもしれません。 ロゴのデザインやカラーやフォントを難しいと感じる人は、ぜひこの記事を参考にしてください。ロゴのデザインにとても役立つ23のサイトをご紹介します。 ロゴ・ジェネレーター（ロゴ作成ツール） カラーを選ぶためのツール ロゴ用の無料アイコンがダウンロードできるサイト ロゴ用の無料フォントがダウンロードできるサイト ロゴのアイデアがもらえる情報源 ロゴ・ジェネレーター（ロゴ作成ツール） ロゴ・ジェネレーターはロゴ作成のための一番簡単な手段です。以下のサイトを使えば手早くロゴが作成できます。無料や低価格で利用できるので費用の節約にもなります。 それでは、一つずつご紹介します！ Logaster 会社名と業種を
第5回 タブ切り替えで快適に読めるインターフェースを作るには | gihyo.jp
見せたいもののメリハリをつけるのがコツ 「限られたスペースに複数の情報を入れたい。でも別ページにするほどでもない……」 そんなとき、タブでコンテンツを切り替えられると便利です。タブ切り替えは、Yahooのトップページで使われているように、かなり浸透してきています。 このUIを使うポイントは、以下のように重点的に見せたいコンテンツとそうでないもののメリハリをつけて使うことです。 特集などの一部のコンテンツに使う ニュースであれば一番見せたいカテゴリーのものをはじめに見せておいて、重要度の低いものは別のタブコンテンツとする サイドバーに置いたトピックスを、アーカイブと最新のもので分ける また、以下のようなデメリットがあるので、UIの見栄えとのバランスを念頭に置いて使う必要があります。 ソースが1ページに書かれるため、ページを分ける場合と違ってSEO効果が薄れる場合がある タブを移動してもページ
オリジナルのカラースキームが作成できるHSVコンバーター -yafla
yaflaは、選択した色をHSV変換し、カラースキームが作成できるオンライン カラー コンバーターです。 下のキャプチャ画像は、当サイトのカラースキームを「yafla」で再現したものです。 yafla 選択した色は10色がストックでき、それぞれ色相(Hue)・彩度(Saturation)・明度(Value)を表示します。 色相には、4つの配色が利用されています。 Triad Color Schemes 色相環の三等分した際の配色。 Analogous Color Schemes 色相環の隣接している配色。 Complementary Color Schemes 色相環の反対色。 Split Complementary Color Schemes 色相環の隣接色と反対色とその隣接色。
デザインセンスを刺激するインスピレーションサイト10選
デザインセンスを刺激して、インスピレーションを与えるサイトの10選です。 Pattern Tap ボタンや背景・線などエレメントごとのデザイン集 StyleCrunch クールなデザインでスタンダード
連載開始特別編 2008年の特徴、2009年の展望 | gihyo.jp
みなさん、はじめまして。Blog「Lançamento（ランサメント）」を運営しているLançamentoです。 この連載では、個人的に感じた国内外のウェブサイトの特徴や素晴らしい部分を、さまざまな角度から一歩踏み込んで解説していきたいと思います。 さて、初回は2008年の素晴らしいウェブサイトを振り返りながら、そのサイトに見られた特徴をお話ししていきます。 特徴その1 操作はわかりやすく、目的はシンプルに FONTPARK 2.0 | MORISAWA さまざまなフォント製品で有名な、株式会社モリサワのモリサワフォントを使用したグラフィック制作／参加型新規コンテンツサイト、「FONTPARK 2.0」です。 図1 株式会社モリサワのグラフィック制作／参加型新規コンテンツサイト FONTPARK 2.0 produce: AXIS Inc., design: tha ltd. サイトでは
音楽制作プロダクション｜DONGURIミュージック
バンド“VIDEO”でボーカル、ギター、作詞、作曲を担当。泉水マサチェリーとともに活動していた“WEEKEND”ではラップを担当。ともに独創的すぎるリリックと歌声は様々なアーティストからも賞賛されている。その変幻自在、奇想天外、神出鬼没なパフォーマンスを生かしてDONGURI MUSIC CHANNELでは数々のキャラクターの声優を担当。映画音楽からイベントの司会までマルチに活躍中。 ラップユニット“WEEKEND”でプロデュース、ラップを担当。活動を経て、SUB CLTUREを結成。そのずうずうしくも人懐っこいキャラクターで、様々な方面から引っ張りだこ。アイドルプロデュースや楽曲提供、アディダスなどの広告音楽の制作、フィッシュマンズの柏原譲とのOTOUTAでの活動などその活動は多技にわたる。レコーディングエンジニアとしての経験も豊富で、作詞作曲からレコーディング、音源完成までワンストップ
gihyo.jp -「Joel on Software」Joel Spolsky：翻訳エッセイ編―プログラムマネージャになるには
Pick Up Entry from "Joel on Software" 翻訳エッセイ編―プログラムマネージャになるには 優れたプログラムマネージャを擁しているということは、素晴しいソフトウェアを生み出すための秘密の公式だ。あなたのチームにはそういう人がいないかもしれない。ほとんどの開発チームには優れたプログラムマネージャがいないのだから。 Charles Simonyi は優れたプログラマであり、WYSIWYGワープロを生み出し、Martha Stewartと付き合い、Microsoftの株で何十億ドルという金を手にして宇宙にまで行った男だが、彼は大きなソフトウェア開発チームの管理における『人月の神話』（注1）の問題を解決しようと、超優秀なプログラマを1人置いて最上位の関数を書かせ、下位の関数の実装は必要に応じてチームの下っ端プログラマにやらせるという方法をとった。この超優秀なプログ
サイトデザインのアクセントに使える6つのPhotoshopのチュートリアル | コリス
aFreeArtworkにエントリーされている、サイトデザインのアクセントに使える6つのPhotoshopのチュートリアルを紹介します。
Photoshopで美しい背景をつくる！グラデーションやブラーの効果的な使い方が学べるチュートリアルのまとめ
美しいぼけやブラーを描いたり、写真の背景に目立つようテキストを磨りガラスに載せたり、モザイクやラインを使って幾何学状にしたり、美しい背景をつくるPhotoshopのチュートリアルを紹介します。 各チュートリアルは30分くらいで出来るものなので、ぜひお試しあれ。
[JS]液体が流れるように画像を少しずつ表示するスクリプト -Liquid Image FX
Flashを使用せずに、液体が流れるように画像を少しずつ表示するスクリプトをWeb Reflectionから紹介します。 JavaScript Liquid Image FX demo 上記のデモでは、Firefoxのロゴが左から順に上下左右から液体が流れるように画像を少しずつ表示します。 また、動きを組み合わせたデモもあります。
第1回 使いやすいメニューはどう作る？ ～水平メニュー | gihyo.jp
「使いやすいメニュー」に必要な3つのこと よく「ナビゲーションメニュー」と言われるように、Webサイトではメニューはナビゲートするためのものです。ナビゲートする対象はもちろん人（ユーザー）ですが、もっと具体的に言及すると「情報を探しているユーザー」ということになります。そして、情報を探す際には、できるだけ簡単に探せる必要があります。 使いやすいメニューには、3つのことが必要です。1つ目はアフォーダンス。言い換えると「メニューがメニューである（次の情報に導く）とすぐにわかる」ということです。2つ目はインタラクティブ性。たとえばメニューにマウスオーバーした、あるいはクリックしたことがわかることを意味します。3つ目はカレント表示。これは「現在いる場所がわかる」という意味です。 この3つを満たすため、メニューには3タイプから4タイプの画像を用意することが多くなっています。ノーマル時、マウスオーバー
JR米子駅「Pretender」を制作しました。 - 株式会社スイッチ
JR米子駅の「Pretender」を制作しました。 「Pretender」編曲/福嶋直哉
はてなブログに実施した、４つのデザインカスタマイズ - Banguardサイト
ブログのデザインを少し変更してみました。それほど大きな変更ではないのですが、変えたのは以下の4点です。 １．ブログのデザインテーマを変更した ２．記事の幅を広げた ３．「続きを読む」を加えた ４．ブログの見出しに画像を加えた はてなブログは、ある程度自分で自由にカスタマイズすることが可能です。Webデザインの知識がない私ですが、なんとか今回の4つは自分でできました。はてなブログのカスタマイズをしようとする際に、参考にしていただたら嬉しいです。 はてなブログのデザインをカスタマイズした場所 今回カスタマイズしたのは、主にブログ全体に関わる部分が２箇所、トップ画面で１箇所、記事画面で１箇所、計４箇所です。特にブログのデザインテーマの変更と記事の幅の変更は、ずっとやりたかったカスタマイズです。 ブログ全体に関わる変更点と、トップ画面での変更点 また、「ブログの見出しに画像を加える」ことも、地味で
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
x.com
Demo: Pure CSS GUI icons (experimental) – Nicolas Gallagher
Color Hunter
南極ワンダー | 文部科学省
Bootstrapで作られたとは思えないほど洗練されたデザインのWebサイトのまとめ
