クソエンジニアが最速でそれなりのWebデザインをできるようになる方法 - UIU
趣味などでWebサービスを作るときにもっとも悩ましいことのひとつがデザインだと思う。外観は重要な要素だとは理解しているし興味も一応あるけれど、実践に乏しいからどうしていいのかわからない。かといって、タダで頼めるような都合のいいデザイナーはいない。結局めんどうになって、Twitter Bootstrapで体裁だけでっち上げた妙にオタク臭いデザインになってしまう。僕もかつてはデザインを気にも留めないクソエンジニアだったけど、必要に迫られて勉強したらそれなりに手を動かせるようになったのでその方法を紹介する。僕が今年入社したスタートアップにはデザイナーがおらず、新機能を作るときなど仕方なくデザインをこなす必要があった。結果的に、仕方ないなりにPhotoshopを使ってプロトタイプを作りHTML/CSSコーディングするくらいはできるようになった。ここに書くのは仕方なくそれなりのWebデザインをする方
いまWebサイトで流行ってる色 / Maka-Veli .com
CATK http://catk.de/ #513baa #6445e0 Frank Chimero http://www.frankchimero.com/ #00deb7 #5fe2ff #6144b0 #ff4a5d #fff3cd Prospek https://prospek.ca/ #46b085 Mixd http://www.mixd.co.uk/ #1c4bbe Flavor http://www.madebyflavor.com/ #f84c74 #9f6cc8 #4d9ff5 #4bdcb5 Build in Amsterdam http://www.buildinamsterdam.com/ #79a596 #222327 Socialist http://www.sociali.st/ #f53e2e #0b0b0b Square https://s
Prott - Prototyping tool for Web iOS Android apps
Design awesome products, with your team. Maximize your team’s superpowers and keep everyone engaged - from first idea to pixel perfect.Get started now!Get started now!Get started now! HAVE FUN! Make your process as awesome as your product. Keep miscommunication, technology failures and folder chaos from spoiling the fun. Enjoy the process, with Prott! Get the best out of your team Within every tea
今年からウェブ業界に務めた人にお薦めしたい本１０冊 - 鈴木です。別館
いい年して、まだまだウェブ業界歴は短い鈴木です。 この年齢から、経験無しでこの業界に移る人は少ないと思います。そんな鈴木がウェブ業界に勤めだして間もない方にお薦めしたい本１０冊を紹介します。 WACA初級ウェブ解析士 認定試験公式テキスト第5版 作者: WACA 一般社団法人ウェブ解析士協会,WACA 一般社団法人ウェブ解析士協会カリキュラム委員会 出版社/メーカー: WACA 一般社団法人ウェブ解析士協会 発売日: 2014 メディア: 大型本 この商品を含むブログを見る 初級ウェブ解析士という試験の教本ですが、この資格を受ける受けない関係なしに読んでおいて損の無い１冊です。ウェブ業界にいる以上覚えないといけないアクセス解析やウェブマーケティングの事が体系的に学べます。しかし、この書籍で学べるのは表面上の体系です。ただ、繋がりが見えてくるので、その中で自分で覚えないといけない事を中心に他
「Webサイトの配色で困った！」→「HUE/360使えば良いじゃない」
Webサイト制作で避けて通れない配色の決定。芸術的素養が絶望的にないのでいつも泣いてるゴロドクさんです、どうも。 所詮素人には理論に基づいた配色など無理ゲーです。先日もちょっとしたデザイン的なゴニョゴニョという場面に出くわしましていつものように悩みつつ、なんか配色決定のためのWebサービスないかなーと思って探してたらこういうのを見つけました。 webでの色指定は基本的にRGB値での指定となりますがこれって光の三原色の混色なんですよね。 実際にCSSなんかで数値いじりつつデザインしてると「なんか違うなー」というときにもっと明るくしようとか、もっと彩度上げようってのが感覚的にどの数値をどんだけいじって良いのかってわからないんですよ。 RGB値直接いじって彩度上げようと思ったらくすんじゃった上に色みかわっちゃってオヤオヤ残念なんて日常茶飯事ですよ（いやそのまえにフォトショなりなんなりでデザインカ
ここ一年くらいで参考になったデザイン/webデザインに関するスライド10
スライドはズルい スライドってズルいですよね！ｗ web制作においてはコンテンツを閲覧させる障壁とも言われるクリックを150回とか強いるのに、こんなにも読ませるコンテンツ！！すごい！ズルい！ たまに思うんですが、私の長文もスライド形式にしてしまえば読んでもらいやすいんじゃない？とか考えます。フリーのwebデザイナーのたえさん(@ken_c_lo)も同じこと考えてたみたいでひじょーに嬉しかったですｗ なんかそのうちブログをスライド化して見られるプラグインでないかなー、もしくは作ってみようかなと思っている今日この頃です。 webデザインに関するスライドまとめ 本題です。世間的には少ないと言われているwebデザインにおける「デザイン」にフォーカスを当てたスライドで私がブクマしていたものを集めてみました。 タイトル的にうん？と思うものもありますが、全て考え方等を含めデザインを考えることについて参考
H1一つでここまで出来るCSS見出しデザインのアイデア9個 / SQUEEZE - Web Design Studio -
HTMLはh1要素だけで、CSSの「border」や「box-shadow」「transform」「linear-gradient」、擬似要素の「:before」や「:after」を使った見出しデザインをご紹介します。まずはサンプルをご覧ください。 サンプルページ » 01.切り取り線 紙を切り取ったようなデザインです。 サンプルとソースを見る » ポイント垂直方向の影のオフセット距離を設定しただけでは、左右両脇にも影ができてしまうので、一旦5px下に影をオフセットしたうえで、広がり距離を負の値(-4px)にし縮小することで、上部の影のみを残しています。 border-top:1px dashed #aaa; border-bottom:1px dashed #aaa; background:#eee; text-shadow:1px 1px 0 rgba(255,255,255,1);
簡単で便利すぎ！WEB制作を「楽」にする無料ツールまとめ
作成：2013/01/28 更新：2014/11/01 Tool > Webサービス フリーソフト、無料ツールなのにここまで使える 前回、無料素材をご紹介しました。 今回は無料で使える「ツール」をまとめます。フォント、画像、配色、htmlからエディター・アフィリエイトリンク作成補助まで。 エンジニア速報は Twitter の@commteで配信しています。 もくじ １．フォント ２．画像編集 ３．ロゴ作成 / ネタ ４．配色 ５．HTML5 ６．CSS ７．ブラウザチェック ８．エディター ９．アフィリエイトリンク作成 １０．フォーム作成 １．フォント PCにインストールされているフォント一覧をプレビュー Font picker イラスト等に使われているフォントを調べる WhatTheFont Windows上のテキストをくっきり、見やすく表示。 gdipp - ｋ本的に無料ソフト・フリー
最低限覚えておきたいWEB配色の基本２大原理と６つの配色パターン
ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. WEBサイトのデザインは、誰もが頭を悩ませる部分だ。 「どういう配色なら良い印象を持ってもらうことができるのか？」「どのレイアウトならコンバージョンが上がるのか？」など、様々なところまで考えを張り巡らさなければいけないからだ。 そこで本日は、The Art of Color Coordination というインフォグラフィックをご紹介する。これを見れば、WEB配色の基本の２大原理と、今すぐに使える６つの配色パターンがすぐに分かる。 そして、初心者でも、統一感のある配色のWEBサイトを作るための大きな助けとなるはずだ。 また、私たちバズ部は12年で400社以上のメディア支援を行い、 立ち上げから10ヶ月で14.6億円の売上を産んだ不動産メデ
UIデザインの参考になるサイトまとめ | ナナメウエblog
毎日仕事中と寝る前にチェックしてるUIの参考になるサイトをまとめました。 もう、見ているだけで涎が出ますね。 Dribbble – Following もはや知らない人はいないでしょう。世界中からハイレベルなデザインが集まるこのサイト。3時間に1回は見てます。 JAYPEG 日本版Dribbbleというとわかりやすいかもしれません。昨年末にできたばかりですが、すごく好きです。投稿しまくってます。自分で作ったUIを素材として公開してたりします。1時間に1回は見てます。 Inspired UI – mobile ui patterns カテゴリーが細かく分かれていて非常に嬉しいです。数も豊富で見やすいサイトです。 iOS Mobile Patterns カテゴリーがわかりやすく、マウスが拡大鏡になるので細部まで見ることができます。 iPad and iPhone Design Ins
HTML5で組んでるならこの魔法のjsも入れておけっていう話
現在、A!@attripさん発で話題になっている「たった2行でIE5.5～IE8をモダンブラウザの挙動にする魔法のJS」という記事。 Webデザイン界隈では当たり前のものですが、実はもうひとつ追加しておくといいかもしれないjsがあったりします。 Photo:html5 By michael pollak IE8以前のブラウザはどうにもこうにも開発者泣かせなわけですが、ie9.jsとcss3-mediaqueries.jsを突っ込むことで、モダンブラウザと同じ挙動にすることができちゃいます。 もう少し具体的に書くと、ie9.jsを組み込むことで、 position:fixed;に対応 max-width、max-heightに対応 属性セレクタ、擬似クラスに対応 margin:0 auto;でのセンタリングに対応 透過PNGに対応 opacityに対応 といったことが可能になります。要はCS
Basic Process to Apply CSS to Your Website
2014年8月17日 CSS, Webサイト制作 CSSでレイアウトを組むのは、最初はすごく難しく感じるかもしれません。私も何度も挫折しかけました。。でもよく使うプロパティを理解し、少しずつ組み立てていくと自然と慣れてきますよ！今回はサンプルファイルも用意したので、ダウンロードしてコードをじっくり見てやってください。連載企画「実践で学ぶWebサイト制作ガイド」、CSSでラストスパートです！ ↑私が10年以上利用している会計ソフト！ 実践で学ぶWebサイト制作ガイド：その7 目標：CSSでレイアウトが組める・基本的な装飾ができる 必要なもの：Windows メモ帳 や、Mac OS Text Editなどの文章エディタツール。もちろんAdobe DreamweaverなどのWeb系オーサリングソフトがあるならそれでOK 対象レベル：CSSの基礎知識がある・基本的なCSSが手打ちで書ける 目次
[CSS]JavaScript無し、レスポンシブ対応、背景をコンテンツのスクロールに合わせて変更するスタイルシート
デモを幅780pxで表示 実装 実装は、5ステップです。 Step 1: 背景画像の用意 デモでは4つのコンテンツがあるので、3枚の背景画像を用意しています。一番大きい表示サイズを想定して、1,800x1,200pxの画像です。 Step 2: HTML HTMLは非常にシンプルです。 4つの各コンテンツはrapperのclassを付与したdiv要素で配置し、header, section, section, footerで内包します。 <!DOCTYPE html> <html class="no-js" lang="en"> <head> <meta charset="utf-8"> <title>From love for lavender</title> ... </head> <body> <header class=" content"> <div class="wrapper
RailsエンジニアのためのTwitter Bootstrapカスタマイズ例
Sassを使ったり、人からパクったりして、極力失敗しない方法
ウェブデザインにおけるテクスチャやパターンの使い方をしっかり学びたい人用のまとめ
当サイトでもテクスチャやパターンなどを素材として紹介しますが、ダウンロードして満足するだけでなく、どのように使うかが大切です。 テクスチャやパターンを効果的に使った実例を見ながら、その使い方を紹介します。 The What, Why and How of Textures in Web Design 下記は各ポイントを意訳したものです。 1. ノイズのテクスチャ 2. リアルにするためのテクスチャ 3. ビジュアル効果を与えるテクスチャ 4. トーンや印象を明確にするテクスチャ 5. シンプルなピクセルパターンの繰り返し 6. 大きなインパクトを与えるパターン 1. ノイズのテクスチャ ノイズのテクスチャは最近のウェブデザインでとても人気があります。これは背景からボタンまで、あらゆるデザインほとんどのエレメントにマッチします。 ノイズの使い方は使う場所に依存しますが、良いノイズというのはぱ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flat Inspire
何度も読み直したい！はてブ数300以上のWeb制作系スライド2012年版
http://handywebdesign.net/2012/11/if-you-want-to-use-many-colors/
配色のセンスをゼロから習得するために役立つスライド
ウェブデザインのセンスを学ぼう、2012年上半期洗練されたディテールのUIデザインのまとめ