はてなを退職しました - tikeda's blog
2005年より勤めさせて頂きましたが、昨日最終出社日を終えて、株式会社はてなを退職いたしました。 はてなロゴやうごメモはてな、はてなトップ、ダイアリーテーマやハイクなど書けばきりがない程、様々なサービス開発、デザインに取り組んできました。特に社長のid:jkondo、はてなに声をかけて頂いた元スタッフのid:naoyaをはじめ、一緒に仕事をしてきた様々なスタッフ、そしてユーザーの方々にたくさんの助けをもらってここまでやってこれたと思っています。リリースの際はいつもディスプレイの向こうにいるユーザーの方々の表情や反応を想像してサービスを作る事が何よりも楽しかったです。本当にありがとうございました。 はてなを退職はしますが、今後もインターネットをより素敵なモノにしたいという思いは全く変わりません。4月からは新しい環境で、自分らしくまた頑張っていくつもりですので、今後とも1人のユーザーという事で
東京に戻り、長男誕生とか、近況 - tikeda's blog
2008年に会社が京都に移転し、2008年4月より京都で単身赴任をしていましたが、7月末で2年4ヶ月の単身赴任生活を終え東京へ戻り、8月からは在宅スタッフとして働いてます。京都で過ごした期間、色々な出会いもあり、得たものも多く、それをこれからも忘れることなく励んでいこうと思います。 また、東京に戻りまもなく、8/7に長男が産まれました。妊娠期間中は、奥さんのサポートをほとんどできませんでしたが、最後で一緒に出産を迎えられて、よかったです。がんばってくれた奥さんに感謝感謝。 開発組織のある京都を離れる事で、役割や求められる事など変化もありますが、新しいチャレンジをさせてもらいながら、新しく産まれた家族の為にも、気持ち新たに日々精一杯やろうと思います。
インターン募集とCSSアニメーション - tikeda::Diary
http://www.hatena.ne.jp/company/intern2010/ 本日より、2010年度のインターンの募集が始まりました。この募集ページ一見普通のページですが、大きく分けて5カ所に分かりやすい遊びを仕込みました。Safariなどでアクセスして、気になる所をクリックするとお楽しみ頂けます。動きはhtmlのclass名を変化させる事によるCSSで実現させてます。場所毎に少し具体的に解説しておきます。 右上のバッジ 単純回転です。最初1周5秒にしてたら、酔うとの意見を頂いたwので倍の10秒になっております。Chromeでも回ります。 h1 img.sun{ -webkit-animation: sunRoll 10s infinite linear; } @-webkit-keyframes sunRoll { from { -webkit-transform: rotat
汎用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's blog
デザイナーが1人だと効率のよいデザインワークってのが肝で最近意識してる事です。 CSS 言わずとしれてますが、後でページ追加したり、機能追加する時など上の項目をコピーして書き換えただけで、デザイナーじゃなくても項目追加を簡単にできます。 テキスト要素はなるべく画像にしない 特にタイトルとか画像にすると、後でページ追加したり項目を増やすのにデザイナーの作業が入るので。なるべく避けてます。 シンボルイメージはグローバルなイメージで サービスシンボルは一番の特徴を捉えるだけのシンプルに（ダイアリーだと「日記を書く」、人力だと「質問と回答」）。細かい特徴を含ませると後で追加された特徴や削除された機能がある度に手を加えないといけないので。 シンボル作りはillustratorで粘る 特にサービスのシンボルや利用頻度の高いアイコンはどんな使い方をどんなサイズで利用されるかが分からないので、photoh
角丸ライブラリ - 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
はてな内の2カラムレイアウト - tikeda's blog
最近のリニューアルなどを経て、はてなのサイトは、2カラムでブラウザサイズに合せてメインカラムが可変するレイアウトが増えてるのですがキーワードページなどメインカラムの要素が様々だったり、カラムの上下左右と柔軟性が必要な場合が多く、色々やりくりした結果、floatを使った以下の方法で定着しています。 HTML <div id="main"> <div class="box"></div> <div class="box"></div> </div> <div id="sidebar"> </div> CSS #main{ float:left; width:100%; } #sidebar{ float:left; width:250px; background:#CCC; margin-left:-260px; } .box{ margin-right:260px; }こうすると、メインカラ
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
tikeda::Diary - 新人力検索はてな
人力検索はてな 今日、人力検索が新しくなりました。 デザインに関しても大きくリニューアルされてます。これまでの人力検索や他のサービスとも違う新しいテイストになっており、9月にリニューアルした、新しいはてなトップページと近い感じで、全体的に明るく、はてならしい、いきいきとした雰囲気になればと思ってデザインしています。 部分的な話をすると、すでにはてラボなんかでも一部で試してみてはいますが、ヘッダー部分が2段ナビゲーションになった点や、ロゴマークが小さく左側にいっておりサービスロゴの視認性もあげている部分なんかは、人力検索だけでなく、これから他のサービスへの展開を考えている要素が加わっています。 ただ、リニューアルしたなかにも、例えば、トップページの「人力検索はてな」のフォントや質問窓周り、また質問詳細ページの回答部分のデザインはこれまでのデザインをうまく生かしながら、はてなの歴史を感じてもら
tikeda::Diary - はてなワンワンワールドに召喚獣
先ほどから、はてなワンワンワールドで恐竜が現れるパニックがおこってます。 恵比寿で 巣鴨で 福岡で 沖縄で という事で出現した恐竜の全体像はこんな感じ。最初はティラノサウルスをイメージして描いていたのですが、途中から自分の想像上の怪獣になってしまってます。次は何が登場するかはお楽しみ。（まさか、会社で恐竜描くとは夢にも思わなかった。でも、こういうのドット絵も描ける自分を発見できてよかった。） 追記：強化型火を噴く召還獣 芸がない恐竜だったので夜にパワーアップして、さらなるパニックが渋谷の街を襲ったそうな。
RSSモジュールを展覧会っぽく演出 - tikeda's blog
RSSモジュールで表示した写真を横スクロールで展覧会っぽく演出してみました。最近、ダイアリーのヘッダーを触っていて、何かヘッダーを使っていつもと違った見せ方が色々できそうだな〜と思いやってみました。普段ダイアリーのデザインをする時はテーマにする事が念頭にある為、「モジュール＝サイドバーに並べる」と考えてしまってますがその辺を考えず試してみました。 一見複雑そうですが、ヘッダーにモジュールを挿入しdivタグで囲んだだけで、後はCSSです。 <div id="art"> <hatena name="rss" url="http://f.hatena.ne.jp/domu/rss" template="hatena-photo" moduletitle="Okinawa Photo"> </div> <div class="main">CSSは、やっつけで、引き続きいじる予定なので日記には書きま
デザイナー募集中 - tikeda's blog
はてなでは現在、デザイナーを募集中です。仕事内容は、現在デザイナーは自分1人なのですが、僕の仕事を少し整理してみました。 はてな全体のブランドデザイン これは、先日リリースしたロゴや名刺、ノベルティといった、WEB単体にとどまらないもっと広い範囲でデザインで、はてならしさをどう表現し伝えていくかのデザインです。 はてなの全てのサービスのWEBデザイン これが一番の肝となる部分といえます。上のはてなブランドという枠にも含まれると思いますが、新サービスを作ったりリニューアルをしたりと、はてなが提供するWEBサービスの一通りのサイトデザイン業務です。個々のサービスはもちろん、開発者達と共にスピーディ且つ、クオリティの高いデザインをリリースする為の業務フローの模索や制作のガイドラインを考えていく必要もあります。 はてなダイアリーのテーマ作成 これは少し特別な業務の一つなので分けてとりあげてみました
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
クックパッドに入社しました - tikeda's blog
新はてなグッズ - tikeda's blog
tikeda::Diary - 節分ロゴ