Kunitaka Kawashimo アートディレクター・デザイナー・フォトグラファー。株式会社クリーム代表取締役。グラフィックデザイン／Webデザイン／撮影の仕事のご相談・ご質問は、お気軽に以下までご連絡ください。info@creamu.co.jp

Accent™は、Nelson Balaban氏によってデザインされた、クールなモダンセリフ書体です。商用でも無料で利用できます。 似たフォントとしてモダンセリフ書体で有名なのは、Bodoniや、Vogueのロゴで使われているDidotなどがあります。 Accent™ Free Display Typeface タイポグラフィーについては、以下の書籍がためになります。 フォントのふしぎ ブランドのロゴはなぜ高そうに見えるのか？ きれいな欧文書体とデザイン タイポグラフィの基本ルール プロに学ぶ、一生枯れない永久不滅テクニック 欧文書体―その背景と使い方 欧文書体 2 定番書体と演出法

ちょっとメモ。illustratorで1pxのラインを引くとぼけてしまってなんとも直らないことがありますが、0.5px上か下に移動させることで直ることがあります。 「環境設定 / 一般 / キー入力」を0.5pxに設定。ラインを選択して上下に移動 あるいは、以下のように変形オプションでY座標を0.5px程度移動させるか、ラインを選択して「ピクセルグリッドに整合」にチェックを入れることでも可能です。 ぜひやってみてください！ 友人がOLYMPUSのPENを使っていて、ちょっとほしくなってしまったぞ。シャッター音が気持ちいいですね。 OLYMPUS マイクロ一眼 PEN E-PL1s レンズキット ホワイト E-PL1s LKIT WHT

ちょっとスマートフォンサイト制作時にデザイン・UIの参考になるサイトをまとめておきます。 iPhoneデザインボックス iShowcase スマートフォンサイト集めました。 iPhoneデザインアーカイブ 絶対見ておきたい有名企業のスマホサイトまとめ CSS iPhone & iPad Mobile UI Patterns 38 Mobile (iPhone) Sites Mobile Awesomeness jQuery Mobile Gallery 昨日は久々に会う友人とドライブからの食事。楽しかった！

ちょっとメモ。Macで複数人のファイル共有をする方法です。 先日募集させて頂いた求人情報ですが、無事採用者が決まりました。とてもいい方なので、がんばってもらいたいと思っています。 そこで、TimeCapsuleのワイヤレスのネットワークを使っているんですが、そこにアクセス許可を与えてしまうと、置いているフォルダの中が見えてしまうので、制限をかけることに。 ちょっと調べたけどよくわからなかったので、Appleサポートに電話して解決しました。 やりたいのはTimeCapsuleを共有のHDとして使って、アクセス制限をかけることです。 AirMac ユーティリティを使います。バージョンは5.5.2。 まず、「アプリケーション / ユーティリティ / AirMac ユーティリティ」を起動 「ディスク / ファイル共有」の、「共有ディスクのセキュリティ保護」を「アカウント」に設定（デフォルトは「Ti

yensdesignというサイトで、サイト内リンクでページ遷移するAjaxサイトの作り方が公開されています。 ↑がナビゲーションになっていて、クリックすると、「#home」や「#tutorials」という形でパラメータがついて、ページ遷移します。 リロードが必要ないので、ページ移動がスムーズで気持ちいいですね。 デモは以下から。 Try the tutorial! XHTMLとCSS、JavaScriptソースが載っているので、一度見てみてください。 Creating AJAX websites based on anchor navigation Amebaとロクナナのイベントが発表されました。友人がイベントに興味を持っていたので、以前打ち合わせにきてもらったのです。その後実現に至ったようでうれしいですね。 名村くんと浦野くんも出ますね。興味のある方はぜひ！12/8正午から申し込み開始と

jQueryを使ってクールなインターフェースを実装したい。 そんなときにおすすめなのが、「30 Useful Jquery Plugins For Developer & Designer」。デザイナー・デベロッパーのためのjQueryプラグイン集です。 結構いい感じのものが揃っています。 YoxView – jQuery image viewer plugin 動きの軽快なlightbox系プラグイン Exposure Jquery Plugin かっこいい見せ方ができる画像ビューア jQuery Constant Footer フッタをブラウザ下部に固定配置するためのスクリプト。RSSを読み込んだりもできる ezMark jQuery Plugin チェックボックス、ラジオボタンをかわいいデザインに 変更できるプラグイン Cloud Zoom これはすごい気がする。画像の一部を拡大して

木の素材を探している。 そんなときにおすすめなのが、『More Than 350 Free and Premium Wood Textures』。木のテクスチャ集です。 なかなかいい感じのものが揃っています。 Free Hi Resolution Wood Textures (9 Textures) 使いやすいシンプルな木の素材 Six Wood Textures (6 Textures) いろいろなタイプの木のテクスチャ6 Wood 01 (3 Textures) 使いやすそうな木のテクスチャ Wood Textures (45 Textures) シンプルなテクスチャ45 Tileable Wood Textures (3 Textures, Seamless) 優しいテクスチャ感の素材 木の素材を探している方は、一度見てみてください。 More Than 350 Free and P

サムネイル表示のあるフォトギャラリーを作りたい。 そんなときに参考になるのが、『Fresh Sliding Thumbnails Gallery with jQuery and PHP』。jQueryとPHPで作るサムネイルがスライドするギャラリーです。 マウスオーバー状態でカーソルを動かすことで、サムネイルをスライドさせることができます。クリックすると、大きくプレビュー表示されますね。 右上のドロップダウンで、アルバム管理もできるようなので、複数のセットを見せることができます。 デモは以下から。 View demo ソースもダウンロードできるので、一度見てみてください。 Fresh Sliding Thumbnails Gallery with jQuery and PHP iPhone版も作られています。 Awesome Mobile Image Gallery Web App やっと

Windows7のようにウィンドウを透過させたい。 そんなときに使えそうなのが、『AeroWindow』。Windows7のような透過ウィンドウを実現するjQueryプラグインです。 divを透過させて、重なったときに後ろが透けて見せることができますね。ダブルクリックすると、びよーんと拡大したり、右下をドラッグするとリサイズすることができます。 デモは以下から。 オンラインデモ 動きが気持ちいいので、一度見てみてください。 AeroWindow gihyoさんでの連載が始まりました。最近のかっこいいUIについて考えたり、作り方を紹介したりしていくので、よろしければご覧ください。 第1回 使いやすいメニューはどう作る？ ?水平メニュー あと代官山で物件を見てきました。めちゃくちゃかっこいいんだけど、うーんもうちょい探そうかな。

WordPressのテーマを作りたい。 そんなときにおすすめなのが、『Elastic Theme Editor』。自分でWordPressのテーマが作れるようになるプラグインです。 ダウンロードした「elastic-theme-editor」フォルダを、「wp-content/plugins」に置いてプラグインを有効化することで、利用可能になります。 ヘッダやコンテンツ、サイドバーの領域をドラッグすることで、それぞれのテーマファイルを作ることができます。シンプルな2カラムで作ったのが以下ですね。 カラム数やレイアウトを自由に作れるのと、ヘッダやサイドバーなどのシンプルなテーマファイルがそれぞれ作られるので、一からテーマを作りたいときに便利なのでは、と思います。 ぜひ見てみてください。 Elastic Theme Editor プログラマと打ち合わせ。周りに仕事を振れるようになってきました。

jQueryのプラグインをチェックしておきたい。 そんなときにおすすめなのが、『12 Helpful jQuery Plugins to Check Before Ending April 2010』。2010年の間に見ておきたいjQueryプラグイン集です。 いい感じのものがまとまっているので、いくつかご紹介しますね。 jQuery ajaxContactForm plugin フォームのバリデータ。背景色を変えることでシンプルにアラートしてくれる。MITライセンス Image Puzzle Using jQuery 画像のパズルゲームを作れるプラグイン jQuery Mega Menu jQueryを使った、見た目も動作もクールなドロップダウン型メガメニュー JCoverflip Macのカバーフローのようなギャラリーインターフェースを作れるプラグイン jQuery Bubble Po

もう一つメモ。WordPressをローカルで構築して、テストサーバ、本番サーバにインポートして移行する場合、画像のファイルパスには気をつける必要があります。 画像のファイルパスは絶対パスでDBに入るので、外部サーバに持って行ったときにDBの中を書き換える手間が発生してしまうんですよね。 なので、サイトルート相対で書いておくとその書き換えが不要になるので楽です。 「設定 / その他の設定」で、上記のように「ファイルへの完全な URL パス」にサイトルート相対パスを記述。この場合は「/wp-content/uploads」としていますが、先頭にスラッシュをつけていれば、任意のパスに設定可能です（「/images」など）。 参考にしてみてください！ 天気がよすぎるので出かけようかな。

97412913, iStockphoto/ Thinkstock よりよいロゴをデザインしたい。 そんなときに参考になるのが、『45+ Beautiful Logo Design Tutorials and Resources for Designers』。デザイナーのためのロゴデザインのチュートリアル&素材集です。 いい感じのものが揃っていますね。 3D Logo Tutorial illustratorとPhotoshopを併用して3Dのロゴを作るチュートリアル Logo Design Project Step By Step Walkthrough コンセプトメイキングから実制作までを解説した記事 Design a Grungy Circular Logo 円形でグランジのテクスチャ感のあるロゴの作り方 Step By Step Logo スケッチからロゴを作るまでのチュートリアル

リアルな紙をPhotoshopで描きたい。 そんなときに参考になるのが、『Create a Realistic Paper Texture in 5 Minutes 』。Photoshopでリアルな紙のテクスチャを作る方法です。 以下のような流れで解説されていますね。 1280 x 1024pxの新規ドキュメントを作成。「長方形選択ツール」で矩形を描いて、qを押下。クイックマスクモードに入る。「フィルタ / ピクセレート / 水晶」でセルのサイズに「3」を入力してOK。もう一度qを押下してクイックマスクモードを解除、「Cmd+shift+alt+N」で新規レイヤーを作って、dを押下後、「Cmd+Delete」で選択範囲を白で塗りつぶす。「Cmd+D」で選択範囲を解除 「焼き込みツール」で露光量を20%にし、紙を暗く汚い感じに見えるまで塗る。その後、「フィルタ / テクスチャ / テクスチャ

98125356/ iStockphoto/ Thinkstock かっこいいアイコンを自分で作りたい。 そんなときに参考になるのが、『35 icon design tutorials in Photoshop and Illustrator』。クオリティーの高いアイコンデザインチュートリアル集です。 Photoshopと、illustratorのチュートリアルがたくさん紹介されていますね。かなり細かく解説されているのでわかりやすいのと、psd、ai(eps)　ファイルがダウンロードできるものもあります。 How to Make a Professional Buddy Icon in Photoshop Photoshopでスーツ姿の男性のアイコンを作るチュートリアル Icon design tutorial:How to make a Calendar icon iCalのような、カレ

92985009/ iStockphoto/ Thinkstock WordPressをもっと楽しみたい。 そんなときにおすすめなのが、『30 Most useful WordPress Plugins – May 2009』。WordPressをもっと楽しむためのプラグイン集です。 なかなかいい感じのプラグインが揃っていますね。 Subscription Options Plugin RSS, メール, Twitterへのリンクアイコンをつけてくれるプラグイン Transposh 翻訳機能をつけてくれるプラグイン WP-SEO Boost 細かいSEOの設定ができるプラグイン WP Likes エントリーごとに「Like」リンクをつけて、ユーザが気に入ったかどうかがわかるようになるプラグイン/li> Lightbox Plus WordPress内でlightbox（画像をオーバーレイで

86496010, Jupiterimages/ Comstock/ Thinkstock iPhoneやAndroidでの表示を確認したい。 そんなときにおすすめなのが、『Mobile Web and App Development Testing and Emulation Tools』。モバイルサイトをテストするためのツール集です。 たくさんのツールが紹介されています。 Google Android Emulator Windowsでスタンドアローンのソフトとして動作するAndroidのエミュレータ TestiPhone.com – iPhone Application Web Based Simulator iPhoneでの表示のされ方をブラウザ上で確認できるシミュレータ iPhoney iPhoneの解像度（320x480px）での見え方を確認できるiPhoney W3C mob

86519104, Jupiterimages/ Comstock/ Thinkstock 自作でPhotoshopのブラシを作りたい。 そんなときに参考になるのが、『How to Create Your Own Photoshop Brushes』。自分でPhotoshopのブラシを作る方法です。 以下のような流れでブラシの作り方が解説されていますね。 木のテクスチャ画像をトリミングして、「色調補正 / 白黒」でモノトーンに変換。その後、レベル補正をかける なげなわツールでブラシにしたい形を描いて、選択範囲を反転してdelete 輪郭をグランジな感じにするため、消しゴムツールでブラシを選んで、エッジを消していく。　完璧を求めずに、ブラシのサイズやブラシを変えながら行う エッジによりグランジ感を出すため、コピースタンプツールでエッジを調整する 「編集 / ブラシを定義」で完成 ほかにないデ

WordPressでサイトを構築してクライアントに納品する。 そんなときにおすすめなのが、『9 Plugins Your Clients Will Love For Their WordPress Website』。クライアントへの納品時につけたいWordPressプラグイン集です。 かなり便利そうなのが揃っています。クライアントに渡す際には、管理画面のデザイン等もカスタマイズしたいですよね。 My Brand ログインページをオリジナルのデザイン・レイアウトにカスタマイズできる。ロゴをクライアントのロゴにするなど Branded Admin 管理画面のヘッダとフッタを、オリジナルのデザインにできる Ozh Admin Drop Down Menu 管理画面の左サイドバーのメニューはクリックしてサブメニューを開きますが、それを水平のドロップダウンメニューに変更でき、マウスオーバー&ワンクリ