プログラマのためのカラーパレットツールを作りました - shoya.io
Paletta - HSV Color palette for every Programmer 背景 フラットデザインの台頭によって、昨今のアプリ/サービス開発において「色選び」が重要視されています。例えば上の写真は次のトイレの時刻を機械学習で予測するRestCastというアプリですが、「いい感じの青」を基調としたタイルを敷くことで、トイレというワードをニオワセないデザインに仕上がるよう心がけてつくりました。 デザイナー/プログラマーの皆さんは普段どうやって色を選んでいるのでしょうか。多くの場合、既存のカラーパレットをぽちぽち選択したり、#123456のようなカラーコードを調整するのではないかと思います。実は、この方法で「いい感じの色」を選ぶのは難しいのです。その理由を色の表現方法を踏まえて説明します。 混色系と顕色系 色を数値で表現する方法を表色系といいます。オストワルト表色系やマンセ
まったくのゼロから、デザインを独学する方法 - DESIGNMAP
まず、タイポグラフィからはじめよう デザインの勉強はまずどこからはじめるとよいだろうか。 一番のおススメは、タイポグラフィ（文字組み）だ。知っていると知らないでは大きくクオリティの差がひらくところだからだ。しかも、タイポグラフィを知らない場合、本人がこのことにまったく気がつかない。筆者自身は、面接である制作会社の社長さんに指摘されるまで、気がつかなかった。デザインというとセンスというイメージがある。であるが、タイポグラフィに関しては知識がないと気がつかない可能性が高い。 文字を組む時に、和文書体と欧文書体を混ぜて組む。和文書体は、仮想ボディに対して、めいいっぱいまで大きい書体と、小さめの書体がある。それを見極めて、サイズやベースライン、文字間のスペーシングの調整をしてゆく。これを錯視調整といい、ロゴをつくるときにも役に立つ技術である。 なので、単に文字の打ちっぱなしは論外である。名刺をもら
P4D デザイナー向けプログラム部
View on GitHub P4D とは？ デザイナーとプログラマーで集まって Web や アプリをつくったりデザインやプログラミングについて相談したりする会です。 現在は毎月 2 回ずつ都内で meetup を開いています。 興味のある方はぜひお気軽に Facebook グループ へご加入ください。 対象 プログラム (Ruby, Rails, JavaScript など) や Git もできるようになりたいデザイナ デザインも出来るようになりたいプログラマ リンク集 Facebook グループ 主なやり取りはここで行っています。 イベント情報 (P4D デザイナー向けプログラム部 - connpass) meetup や勉強会の予定はこちらでご確認ください。 Home · prog4designer/meetups Wiki meetup, 勉強会の記録です。 お問い合わせなど 主催
言葉からウェブデザインを始めよう(翻訳) | Elle Kasai
元の記事はJustin Jackson氏が書いたこちらの記事だ｡原文はとてもシンプルなページに載せられていることがわかるだろう｡一度ご覧になってから下記の和訳を読み進めることをおすすめする｡ これはウェブページです｡ たいしたページではありません｡ あるのは言葉だけ｡ それをあなたは読んでいます｡ オシャレなデザインや､レスポンシブなレイアウト､魔法のようなスクリプトに私たちは魅了されてしまいました｡ でも､ウェブで一番強力な道具は､今も昔も言葉です｡ 私が書いた言葉を､あなたが読んでいる｡これこそ魔法です｡ 私はブリティッシュコロンビア州の小さな都市にいますが､あなたは別のどこかにいることでしょう｡私は2013年6月20日の早朝にこれを書きましたが､あなたは違う日時にこれを読んでいることでしょう｡私はノートパソコンでこれを書きましたが､あなたは携帯電話でこれを読んでいるかもしれないし､
簡易的なワイヤーフレームを手軽に作成、URLも発行してくれるWebサービス・Wireframe.cc
ワイヤーフレームを手軽に作れる、 というWebサービス。ユーザー登録 も不要です。URLが発行されるので 教えるのも丁度いいかも。ただ、 凄く高機能、というものではない のでイメージを伝える、みたいな 用途になりそうです。 個人的には軽量でユーザー登録不要、直感で作成出来る点、URLが発行される、という点が気に入りました。 こんな感じ。ドラッグで範囲を決めてエレメントを選定するだけ。メモも残せます。 背面、前面設定なども出来ます。 機能はシンプルながら、最低限欲しい物は揃っていて、操作性も良い感じです。URLさえ分かれば誰でも編集できてしまうので、場所の離れた方とのレイアウトの打ち合わせ等、簡易的な用途として使うのもいいかもしれないです。 Wireframe.cc
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック// Speaker Deck
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック with Sass / Compass (English Version) https://speakerdeck.com/ken_c_lo/zurui-design-technique-english-version 第一回 プログラマ向けデザイン勉強会 #design4p http://connpass.com/event/1185/ で発表させていただきました。 （#p4d プログラマ向けデザイン部 主催イベント http://prog4designer.github.io/） @mah_lab さんが ズルいデザインのRails gemを作って下さいました http://blog.mah-lab.com/2012/11/07/zurui-design-for-rails/ (Repository) https://git
リストに1pxのラインを追加するだけで、印象がぐっとよくなる
#sample { width:500px; font-size: 16px; color:#333333; background:#d6e5f5; padding:20px; } #sample li { list-style-type : none; padding:5px 10px; border-bottom:1px solid #84b2e0; } 1. 下に薄いラインを追加してみる このリストに1本ラインを加えるだけで全然印象が変わってきます。試しに下に白いラインを追加してみます。 #sample { width:500px; font-size: 16px; color:#333333; background:#d6e5f5; padding:20px; } #sample li { list-style-type : none; padding:5px 10px; bord
CSS3対応、スタイルシートの記述で気をつけるべき19のポイント
The CSS Lint Rules [ad#ad-2] 以下は、スタイルシートをオンラインでチェックできるツール「CSS Lint」で使用しているルールを意訳したものです。 スタイルシートの記述で気をつけたい19のポイント スタイルシートの記述ミスはしない これは一番大切なことです。 1文字でもタイプミスをしないようにしましょう。 隣接クラスは避ける 「.foo.bar」のような隣接クラスはIE6などでサポートしてないので、使用には注意してください。 空のルールを残しておかない 空のルールとはプロパティを指定していないものです。 .foo {} これは単にファイルの容量を肥大化させるだけなので、削除します。 display使用時のプロパティに注意 スタイルシートではプロパティのグループを一緒に定義することができますが、displayを使用する際には下記のものがそれぞれ無視されます。 di
Sitemap URL Scraper
Videos 1 [ 47 ] [ 148 ] [ 196 ] [ 104 ] [ 112 ] [ 467 ] [ 104 ] [ 129 ] [ 92 ] [ 378 ] [ 143 ] [ 17 ] [ 14 ] [ 426 ] [ 55 ] [ 184 ] [ 340 ] [ 385 ] [ 41 ] [ 185 ] [ 343 ] [ 47 ] [ 54 ] [ 96 ] [ 122 ] [ 469 ] [ 199 ] [ 311 ] [ 214 ] [ 438 ] [ 96 ] [ 260 ] [ 86 ] [ 292 ] [ 364 ] [ 198 ] [ 259 ] [ 467 ] [ 326 ] [ 350 ] [ 345 ] [ 469 ] [ 367 ] [ 359 ] [ 394 ] [ 421 ] [ 43 ] [ 234 ] [ 305 ] [ 84 ]
iPhone 用 Web ページの作り方 - iPhone Development Guidelines
iPhone 用 Web ページおよびアプリケーションの作り方 - iPhone Development Guidelines を読む Apple 公式 iPhone ウェブ開発ページ Apple が iPhone 用ウェブ開発ページを公開しました。（追記：Apple から日本語訳も出ました。） Apple Developer Connection -iPhone Dev Center（英語ページ・旧称 Web Development for iPhone） WWDC 2007 で明らかになったのは1、iPhone では API の公開や SDK の提供はなく、iPhone 用にアプリケーションを開発するには、ウェブアプリケーションとして提供するしかないということです。（追記：その後、2008年に SDK が提供されることになりました。） WWDC 2007 のセッション内容には、“Dev
MOONGIFT: » これはすごい！Firefoxを使ってサイトのモックアップを簡単に作成する「Pencil」:オープンソースを毎日紹介
これはデザイナーのみならず導入必須のソフトウェアと言えそうだ。 Webサイトを作る際には、モックアップが必要になる。それをベースにして「ここをこうしよう」「次はどこに遷移させよう」といった議論が可能になる。頭の中だけではイメージがはっきりせず、意見も出しづらい。 ドラッグアンドドロップでモックアップを作成できる そんなモックアップを作成しようと思ったら、紙やHTMLオーソライズソフトウェア、画像編集ソフトウェアを使うことが多かった。だが画像編集ソフトウェアではチェックボックスやテキストボックスが作りづらい、HTMLオーソライズソフトウェアではデザインの微調整が面倒、紙では重ね書きしづらい…とそれぞれに欠点があった。そこでこれを導入してみよう。 今回紹介するオープンソース・ソフトウェアはPencil、Firefoxアドオンとして動作するモックアップ作成ソフトウェアだ。 個人的にはモックアップ
FC2 ドメイン 年間598円～
複数ドメイン一括登録可能！ 複数ドメイン検索機能を利用すると、お好きな独自ドメインを一括で取得出来ます。 移管でコストダウン！ FC2ドメインは業界最安値水準の価格でドメインを提供しており、維持費の安さはトップクラス！ FC2サービスと連携 FC2ブログ、FC2レンタルサーバー等に、ドメインを簡単に設定する事が可能です。 管理画面で簡単設定！ シンプルな管理画面で、初心者の方でも簡単に独自ドメインの管理・設定が出来ます。 FC2のサービスと連携！簡単に独自ドメインを利用できます！ 以下のサービスでご利用いただけます。 ブログ 初心者でも簡単！豊富なテンプレート！ レンタルサーバーLite 月額250円・で容量5GBの簡単・安心のレンタルサーバー レンタルサーバー 容量を30GBに増量!マルチドメイン対応で他社から乗換えの場合、初期費用が半額! ショッピングカート クレジット決済、ダウンロー
画像とかの横にあるテキストを上下中央に
←こういう感じで、画像の横にあるテキストを画像に対して上下中央にするってーのは、今まで出来ないと思ってたんす。 だけども、ヨモツネットさんの記事でヨモツネット[日記] ≫ CSS で簡単に上下中央揃えを実現するってが紹介されてたので、試して見ました！ display: table-cell;がポイントになってて、IEはハックで対応みたいな感じです。 デモページ 画像とかの横にあるテキストを上下中央にする。のデモページ ヨモツネットさんとまるっと同じサンプルだとアレなので、ちょっとだけ実用的な感じでつくってみましたよっと。 ちょっと、IE6で確認してないので、ダメだったらご連絡ください。 IE6対応しました。ハックの書き方がいけなかったようです。すみません。 div.centeringTest p { display: table-cell; vertical-align: middle;
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
はじめての欧文書体
Home
ノンデザイナーのための配色理論
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
[CSS]スタイルシートをIEだけに適用する大胆で簡単な条件式の使い方 | コリス![[CSS]スタイルシートをIEだけに適用する大胆で簡単な条件式の使い方 | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/bc54860ba06deaa45382cf2bddc929515def0354/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fshared%2Flogo-2014050501-en.png)
[CSS]いろいろな問題を解決する1行のスタイルシート集 | コリス
Web Hosting - Best Website Hosting | HostGator