新はてなグッズ - tikeda's blogはてなガムに続き、新しいはてなグッズができました。photo by id:naoya
汎用CSS - tikeda's blog
先日、ダイアリーをリニューアルしたのですが、今回これまでとは違って、はてなの汎用スタイルシートを作り、それを導入して作っています。簡単に説明すると、これまでは、サービス毎に1つCSSを作っていましたが、今後、はてな内でサービスのデザインに統一感を持たせる意味などで、全サービスのベースに、同じCSSを導入してデザインを作っていこうという感じです。 構成 ソースを見ていただければ分かりますが、汎用CSSはglobal.cssというCSSから、syntax.css、support.css、common.cssという3つのCSSをimportして構成されており役割は以下の感じです。 common.css タグの基本スタイルの定義と、ページ内の各要素をパーツ化して、それを部品毎にclassにしているデザインの枠組みになるCSSです。例えばtableであれば「一覧用（.table-list）」「管理画
角丸ライブラリ - tikeda::Diary:
最近角丸を作る機会が多かったので、今後の為に色々整理してたんですが、公開しておきます。使えそうだったらいじって使ってください。中身の文書を書き換えれば上下左右と可変するように柔軟になっています。また、一部PSDも同封してます。 0501curve.zip 中身はこんな感じ。 ベーシックなタイプ 01：小さ目な角丸 02：大き目な角丸 03：斜線の角丸（背景画像をループ） 04：ストライプの角丸（背景画像をループ） 05：木模様の角丸（背景画像をループ） 06：リボンのついた角丸（背景画像を固定） 4つ角をの内側を透過GIFにしてるので、大枠の背景を変えれば発想次第で色々と使えると思います。HTMLとCSSは大体こんなんです。divが多いのがちょっと嫌な感じですが。はてな内ではspanでやってたりもします。 HTML <div class="curve-01"> <div class="cu
DOCTYPEとCSS - tikeda's blog
最近、同じCSS・同じブラウザなのに、あのサイトではできていて、このサイトじゃできないみたいな事があって思い当たってるのがページ「DOCTYPE」が違ってたって事が何度かありました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> IEでIMGにpaddingがつかない FFでanchorのかかったimgにtext-decorationがつかない table内でのtext-alignが普通（？） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> IEでIMGにpaddingがつく FFでanchorのかかったimgにtext-decorationがつく ta
Hatena_tangoで金太郎の写真を別の写真にしたい - tikeda's blog
昨日公開したダイアリーの新しいテーマHatena_tangoですが、左上の画像を別の画像にできるように、psdファイルをアップしました。photoshopが使える方は好きに合成して作ってみてください。 hatena_tango.psd 少し敷居が高いので、サンプルでいくつかアップしました。該当のスタイルシートを「詳細デザイン」のスタイルシート欄に入れたら左上の画像が切り替わります。よろしければ使ってください。 しなもん h1{ background:url("http://f.hatena.ne.jp/images/fotolife/d/domu/20060412/20060412142217.gif"); text-indent:150px; } 兜 h1{ background:url("http://f.hatena.ne.jp/images/fotolife/d/domu/2006
新しいはてなTシャツ - tikeda's blog
長袖版の新しいはてなTシャツが今日届きました。半袖版とデザインも少し変わっています。
デザイナー募集中 - tikeda's blog
はてなでは現在、デザイナーを募集中です。仕事内容は、現在デザイナーは自分1人なのですが、僕の仕事を少し整理してみました。 はてな全体のブランドデザイン これは、先日リリースしたロゴや名刺、ノベルティといった、WEB単体にとどまらないもっと広い範囲でデザインで、はてならしさをどう表現し伝えていくかのデザインです。 はてなの全てのサービスのWEBデザイン これが一番の肝となる部分といえます。上のはてなブランドという枠にも含まれると思いますが、新サービスを作ったりリニューアルをしたりと、はてなが提供するWEBサービスの一通りのサイトデザイン業務です。個々のサービスはもちろん、開発者達と共にスピーディ且つ、クオリティの高いデザインをリリースする為の業務フローの模索や制作のガイドラインを考えていく必要もあります。 はてなダイアリーのテーマ作成 これは少し特別な業務の一つなので分けてとりあげてみました
グラフィック素材でみるリニューアル - tikeda's blog
リニューアルに関してはデザインに色々なポイントがありますが、その一つとして、各サービスのシンボルを中心とした補助的なグラフィック素材です。上は今回のリニューアルで利用した主なものです。 はてなには「D」「F」「A」といったようなアルファベット1文字が表す各サービスの象徴があるのですが、これは一般用語であることや、インパクトを与えるにはビジュアル的に難しいので今回こういった素材を盛り込む事にしました。 目的としては、各サービスの内容やその良さを最大限に引き出し、絵一枚で訪れた人に楽しさやインパクトを与えるということです。 デザインするにあたっては、はてなっぽい感じを出すために、リアルでありながらイラスト的なやわらかさを含ませたくテイストの模索を重ねてきました。 もちろんこれからも、クオリティの向上や表現方法についての模索を続けようと思います。
はてなブックマークのロゴ - tikeda's blog
よくみててください。滑らかに動くようにするのと、全色準備するのに結構パワー使ったけど、あまり知られてない気がするので一応書いておこうと思います。
ドット絵ができるまで - tikeda's blog
アイコンなどを作る時はよく、ドット絵をデザインの手法として使うのですが、これまで、とてもたくさんのドット絵を描いてきてテクニックをあれこれ身につけてきました。はてな社内でも、どうやって描いてるの？みたいな事を時々聞かれます。試しにはてなマップで地図に表示される「写真」アイコンをWinkを使って再現してみました。（実際の物はもっとディテールに手をいれてますが。）意外と時間がかかってしまい、1300フレーム6MBにもなりましたが、個人的にも客観的に見れて面白かったです。 ドット絵ができるまで ドット絵1つでも小さい領域ながらテイストや雰囲気を考えながら作る事ができ、非常に奥の深い手法だと思います。 追記 下書き：http://d.hatena.ne.jp/tikeda/20050715/1121441586
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
はてなTシャツ 2005 - tikeda's blog
「？（クエスチョンマーク）」形の由来 - tikeda's blog