ドット絵ができるまで - tikeda's blog
アイコンなどを作る時はよく、ドット絵をデザインの手法として使うのですが、これまで、とてもたくさんのドット絵を描いてきてテクニックをあれこれ身につけてきました。はてな社内でも、どうやって描いてるの？みたいな事を時々聞かれます。試しにはてなマップで地図に表示される「写真」アイコンをWinkを使って再現してみました。（実際の物はもっとディテールに手をいれてますが。）意外と時間がかかってしまい、1300フレーム6MBにもなりましたが、個人的にも客観的に見れて面白かったです。 ドット絵ができるまで ドット絵1つでも小さい領域ながらテイストや雰囲気を考えながら作る事ができ、非常に奥の深い手法だと思います。 追記 下書き：http://d.hatena.ne.jp/tikeda/20050715/1121441586
Web Fontsセミナーでの資料 - tikeda's blog
先週木曜日4/12にパソナテックさんにて、モリサワさんのWeb Fontsサービス「TypeSquare」とのタイアップセミナーで講演させて頂きました。内容としては、Web Fontの概要から実践まで広い内容になり特にTypeSquareをはじめJapanese WebFontについての内容が多くを占めております。遅くなりましたが資料を以下に公開しました。 Web Fonts with Web Design // Speaker Deck 一部、プレゼン資料だけで説明なしでは、文脈的に解釈が難しいと思う内容も含んでいますが、少しでも役に立つならと思い公開してきました。ご興味ある方はご覧ください。
「●●とデザイン」受講を終えて - tikeda's blog
去年の春から多摩美術大学の社会人向け講座「●●とデザイン」を1年間位かけて受講していました。講義は毎回「ビジネスとデザイン」「音とデザイン」「独自の文化とデザイン」といったようにあるテーマとデザインという形式でテーマを変えて進みますが、それぞれ、佐藤可士和さん、ヲノサトルさん、コシノジュンコさん、のように第一線のデザイナーを招いての講義でした。普段の専門分野から一歩離れてデザインを見つめるよい機会となったのですが、テーマのなかに「禅とデザイン」「仏壇とデザイン」といったように普段デザインという観点で直視しないジャンルの講義も多く、身の回りの暮らしにはこんなにデザインが考えられ、囲まれて暮らしているんだと改めて感じるいい機会でした。 たくさんの興味深い点はありますが、2つの印象深かった点を書いておくことにします。 ●●の部分の専門性 受講を通して面白かったのは、●●の部分の専門性のように思い
はてなココのカテゴリーアイコンをデザイン素材として公開 - tikeda's blog
はてなココのカテゴリーアイコンが全てできた（計62個）ので、無料で使えるデザイン素材ということでCCライセンスにて公開しました。先日オープンした、Hatena Developer Centerのはてなココのページからダウンロードできます。ダウンロード、ライセンス詳細については以下のページでお願いします。 はてなココスポット API 第1版 - Hatena Developer Center 「カテゴリー情報取得」という項目内です データ自体はイラストレーター形式（ai,eps,png）ですし、パスの数も少なくベーシックな機能だけ使っています。その分ちょっと安易などころもありますが、カスタマイズしやすいデータになっていると思います。例えばサイズの拡大やモノクロ2階調に変更など都合に合わせて改変して頂いてかまいませんし。もちろん、はてなココAPIを使ったサービスはもちろんそれ以外のデザイン素材
ココ PHOTO CALENDAR - tikeda's blog
tikeda's ココ PHOTO CALENDAR 先日、はてなココのフィードページがリリースされ、本人のイマココ履歴のフィードが使えるようになりました。カレンダーぽいビューが個人的に好きなのですが、ICSを使った表示が面白そうで試したところ、写真がないのがつまらないので、ATOMフィードを使って、簡単にカレンダーっぽいビューを自分用に作ってみました。 ココのポラ風写真を、コルクボードに刺してるっぽくしてみてます。秘密スポットじゃない場合は日別ページもあり、こっちはGoogle Mapをちょっとセピア調に表示して、こっちも貼り付けた感じにしてみてます。自分のは今は結構歯抜けなので、普段写真を使ってる人はもっと楽しいかもしれません。なるべく自分も歯抜けにならないようにしてみようと思います。 ちなみに Webkit,Firefoxだと日別ページで地図の右上にアナログ時計を入れてみたんですが、
はてな京都オフィスのルームサイン - tikeda's blog
はてなの新しい京都オフィスには、鉾の名前から取ったガラス張りの会議室があります。柱に続いて今度はこの会議室のルームサインを作りました。 デザインは鉾の紋を元にしており、順に「菊水」「舩」「長刀」「月」です。壁面のガラスのサイン部分だけを曇らせるよう、カッティングシートを直接会議室のガラスに貼り付け、サイン部分だけが残るようにカッターでカットしていきました。id:tomomiiに手伝って頂きなんとか仕上げました。 試作 以下、3種類の素材を使って、難易度の一番高そうな「菊水」で試作品を作りました。 カッティングシート サンド 採用されたものです。ガラスはカッターでは切れないので、カッティングシートを最初に張っています。シート自体がやや分厚いので、上からの光の入り具合が断面で微妙に変わったりするのがちょっと気になります。 カッティングシート マットホワイト 上と同様にカッティングシートなんです
北陸旅行 - tikeda's blog
金沢21世紀美術館 - スイミング・プール 金沢21世紀美術館 - カラー・アクティヴィティ・ハウス 白川郷 輪島朝市 輪島千枚田 ヤセの断崖 千里浜なぎさドライブウェイ 先週、14日、15日と北陸を回ってきました。石川には何度か行っていたのに、金沢21世紀美術館に行った事がなかったので、それにあわせて、白川郷に訪れ、和倉温泉に泊まり、輪島の朝市を見物、能登の海岸を走り、久しぶり一人でのんびりしました。
はてな京都オフィス柱のデザイン - tikeda's blog
はてな京都本社が3倍に増床！改装の一部始終をレポート - はてなブックマークニュース はてな京都オフィス増床にあたり、フロア中央の3本立つ柱のデザインをしました。京都を感じる風景を描いています。 元になったのは、はてなココをデザインした時に作っていたこのテイストなのですが、このままのラフなタッチで、床面に近い色のラインのみであまりオフィスの邪魔にならないようにしていて、机の少し上の面に地平線がくるよう地面も加えた絵に改めました。 柱はそれぞれサイズも幅も異なりいびつな形です。一番大変だったのは、この柱全ての始点と終点を合わせて繋がった絵に見せること。風景なので、接合部が綺麗じゃないと360度美しくありません。接合部は空のジョイントを減らす事でずれを軽減しているのですが、施工まではミニチュアや合成を作って何度もシミュレーションを行いました。 また、3本それぞれの柱の絵を1面ずつずらし、オフィ
京都で個展をします - tikeda's blog
まだ少し先で8月なのですが、京都の恵文社一乗寺店のギャラリーで1週間、植物や京都の風景を織り交ぜた色鉛筆画と夏の植物をテーマにした展覧会をやります。 普段の業務はWEBサービスのデザイン中心ですが、京都でしかやれないような事をやってみたいなーと思ってたりチョコチョコ描いてた絵がたまってきたのと、インターネットと逆で、限られた期間で、京都のあるギャラリーに来ないと見る事ができない限られた場所でのコンテンツってのもいいかな。って事で一人よがりのものですが一目に触れさせてあげようと思い、去年の半ばくらいにギャラリーとも話がついて以下で決まってました。 日時 2010/08/17（火）-2010/08/23（月） 10:00 - 22:00（最終日のみ -18:00） 場所 恵文社 一乗寺店 ギャラリーアンフェール 〒606-8184 京都市左京区一乗寺払殿町 叡山電車一乗寺駅下車して商店街を西へ
汎用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
はてな内の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; }こうすると、メインカラ
角丸ライブラリ - 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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
