はてなブックマーク

ずいぶんと久しぶりの投稿です。最近仕事でFont AwesomeやGLYPHICONなどでアイコンなどでWebフォントを使う機会が増えてきました。 ですが、いざ人に確認してもらうと、Webフォントが文字化けして豆腐文字になってしまっていたり、謎の文字が出てきてしまったりと色んなケースで失敗してます。 今日は実際にやってみて文字化けした例を紹介します。 原因1 サーバーにフォントファイルをアップしていない CSSで「ここがフォントファイルの場所」と教えているのに、その先にフォントファイルがない場合に□となります。 ChromeやFirefoxの開発ツールではネットワークタブで404のステータスコードが返ってきますね。 自分でデザインをしていると、グラフィックソフトでWebフォントを利用するときにフォントファイルをインストールしていると、なかなか気付きづらいです。 対処法 CSSでフォントファ

今日はEmEditorでSassファイルの対応をしていく設定例を紹介していきます。デフォルトはどうだったっけ？ってという部分もあって、すでに設定している場合もありますが、そこはスルーしてもらえばと思います。 Sass用EmEditor設定ファイルのダウンロード 今日紹介する設定では、コードカラーリングとSass・CSS3用のキーワードファイルを配布しています。先にこちらをダウンロードしておくとスムーズに進められます。 Sass用EmEditoro設定ファイルのダウンロード 基本的な設定 ［ツール］→［設定の選択］→［設定の定義］→［CSS］→［プロパティ］から設定を開きます。以降は設定するタブの表示順に設定例を書いていきます。 設定はこの画面からスタートします。 自動インデント 僕はCSSのセレクタを入力し、「{」の後にEnterキーを押して改行します。すると、デフォルトだと、カーソルがセ

先日はPowerPoint、Keynoteで自動再生するスライドショーをの作り方を紹介しましたが、投影するPCによってはPowerPointが入っていなかったり、Windowsマシンを使わざるを得ない場合があります。 そんなときに便利なのがどちらのOSもサポートしていてインストールされている可能性が非常に高いPDFで自動再生する方法がおすすめです。 具体的なやりかた AcrobatでもAdobe Readerでも方法は同じです。 Windowsの場合は［編集］→［環境設定］で、 Macの場合は、メニューから［Acrobat］→［環境設定］で環境設定を開きます。 画面の左側の［フルスクリーンモード］をクリックします。 ［表示ページを切り替える間隔］にチェックを入れて、1枚のスライドの表示時間を指定します。 お好みで「フルスクリーンモードの効果」を指定します。デフォルトだと一瞬ふわっと画面が黒

Webデザインは他の媒体デザインからも学べることが多々ありますね。今回は僕が実際に「ロゴデザイン・ラブ」という本を読んで、これだけは押さえておきたいなと感じたポイントを紹介します。 デザインの感想のもらい方を工夫する 著者は作ったロゴをお客さんに確認する際には「これでいかがでしょう」といった聞き方をせずに、ひとつ踏み込んでデザインをプレゼンしているようです。 デザインをプレゼンする際に事前にヒアリングしたことから背景をまとめ、新しいロゴでどこを目指すのか、デザインがもたらす実質的な利益についてもう一度復習します。そしてデザインを見せたあと、感想の話し方にも指示を出しています。 では、感想を聞かせてください。このデザインはすでに私たちの間で合意済みの戦略に沿ってると思いますか？ただし、問題がある場合に、解決策を結論づけて指示することはお控えください。それはあなた方から支払われる報酬の中で私た

Mac版Keynoteでのやりかた KeynoteはiWork ’09以前のバージョンと、Marvericksのリリースを合わせてバージョンアップされたKeynote 6以降で微妙に操作が違います。 まずは、最新版のKeynote 6以降での操作方法。画面の右側にあるタブから［書類］をクリックします。 「プレゼンテーションタイプ」を［自動再生］にします。 1枚ごとのスライドの表示時間を［遅れ］で設定します。 ［ビルド］側はスライド内のアニメーションを設定している場合に何秒後にそのアニメーションを開始するかを指定するものです。スライド内にアニメーションを使っている場合はお好みに応じて設定してください。 Mac版バージョン5以前でのやりかた メニューから［インスペクタ］をクリックします。 タブの一番右側［書類］をクリックし、［スライドショーの再生を繰り返す］にチェックを入れ、［プレゼンテーショ

PowerPointでは自動で繰り返し再生するスライドが作れます。普段だと自分でタイミングをみてスライドを動かすことのほうが多いですが、自動で再生する方法もあります。今日はPowerPointは自動で繰り返して再生する方法を紹介します。 具体的なやり方 スライドを自動で繰り返すには、こんな流れで設定します。 ［画面切り替え］のタブをクリックし、「画面切り替えのタイミング」の［クリック時］のチェックをはずし、［自動切り替え］のチェックオンにします。チェックボックスの横にの欄にはスライドの表示時間を入れます。例えば、スライドの表示時間を20秒にする際は、「00:20.00」と入力します。 これを1枚1枚やっていけば、スライドの表示時間をバラバラに設定することができます。全てを同じ時間で表示する場合は、「すべてに適用」をクリックします。 スライドショーのタブに移動し、「スライド ショーの設定」を

CSS Niteに出演しますと書いてそれっきり、、、2ヶ月ぶりのエントリーです。こんにちは、しばっちです。タイミング的に仕事がぼんぼんやって来て、嬉しい悲鳴をあげる反面、フリーランスとは断ることを覚えないと大変なんだなということを痛感しています。 さて、「CSS Nite LP, Disk 32: Sass」に出演しました。僕のセッションでは「Sassを使ってどんなものなのかを知ってもらう」ということでしたので、落とし穴や管理面については極力後ろのセッションで解説されることを期待して省きました。アンケートでは叱咤激励いただき、もっと頑張りたいと思う次第です。 ちなみに、スライドは3ヶ月後に一般公開となりますので、急ぎで僕のスライドをご覧になりたい方はフォローアップ参加でお申し込みいただければ見られます。 セッション中では一切触れませんでしたが、コードの管理はもともとプログラムからWebを触

IllustratorのカラーパネルでRGBからHSBへ切り替えるときはパネル右上のメニューから選択してましたが、もう少し楽になる方法がありました。 やり方 カラーパネルの中のカラースペクトルをShift＋クリックで違うカラーモデルに変更できます。RGB→HSB→CMYK→WebセーフRGB→グレースケール→RGB…という順番で切り替わり、何回か繰り返すと最初のモードに戻ります。 Illustratorでグラデーションを使う際、スウォッチで白黒のグラデーションを適用して色を整えることがあります。その際はパネルメニューで変更するのではなく、クリック領域の広いこっちのほうが気分的には楽になるような気がします。 PhotoshopやFireworksはカラースペクトルの変更のみ ちなみに、PhotoshopやFireworksでも同じようにカラースペクトルをShift＋クリックで一応それっぽい動

普段は相変わらずFireworksを使っていますが、ときにはPhotoshopやIllustratorでビジュアルを作って、そのままスライスして作ったほうが早い場合もあります。 ですが、デフォルトで書き出しをすると必ず「images」フォルダの中に画像が書き出されてしまって、なんとかしたいと思ってみたら、やり方教えてもらったのでメモメモ。 やりかた 1. ［ファイル］→［Web用に保存］をクリックして、Web用に保存のダイアログを開きます。 2. ［保存］ボタンをクリックします 3. 保存ダイアログの［設定］のプルダウンから、［その他…］を選択します。 4.出力設定のダイアログの中の、［画像をフォルダーに保存］のチェックボックスを外します。このチェックボックスを外すことで、新しくimagesを作らなくなります。 5.あとは［OK］ボタンを押し、［保存］ボタンを押すと、画像を書き出します。

下3つはIE7を無視したサイトならとくに@includeを使う必要がないかもしれませんが、自動的にIE用に別途スタイルを書いてくれるのもありがたいですね。 CompassのTypographyモジュールのリファレンス（英語） CompassのUtilitiesモジュールのリファレンス（英語） 英語のリファレンスは画面の左側がメニューになってるになっているので、そっちを見てコードを見ていくと全体感がわかりやすかったです。 Compassのヘルパー（275ページ） Compassのヘルパーはimage-width()とかimage-height()みたいな便利なものもありますが、これ知っておけばもっと省力できた！っていうのがセレクター系のヘルパーです。 headings関数 h1, h2, h3, h4, h5みたいに連続する見出しにスタイルを当てることが多いので、ないかなーと思ってたのですが

Compassを使っていると、必ずできてしまう.sass-cacheフォルダ。中身を確認すると、なんだか訳の分からない文字列で埋め尽くされていますね。サイトのHTMLごとまるっとファイル転送をすると、このフォルダだけ異様に時間がかかったりしてなんとかしたくなってきます。 今日はこのCompassのキャッシュの扱い方を紹介します。 キャッシュって何だ？ Sassのキャッシュとは、コンパイルの時間を短くするために作られるファイルです。compass createコマンドで作られるconfig.rbでコンパイルをすると、config.rbのファイルと同じ階層に.sass-cacheという隠しフォルダを作り、その中にキャッシュを格納しています。 普段コンパイルの時間が短いから不要じゃと思いがちですが、コードの量が多くなると体感としてコンパイル時間が遅くなってしまいます。 対策その1：キャッシュファ

ディレクターが気を遣うところといえば、デザイナーとどうやってイメージを共有するかということが一つあると思います。イメージの共有が失敗すると、いつまでたってもお客さまからゴーサインがもらえずに、まったく進まない…そんな体験が一度はあると思います。 今回はディレクターがデザイナーとビジュアルについて、イメージを共有するときに今までやってトライしてきたことをまとめてみました。 ビジュアルの注文を受け取るデザイナー目線でも書いていますが、一緒に共有方法を試してきたディレクターのナカムラこと@cafekentaの感想を載せています。ちなみに、レイアウトはディレクターが引いたワイヤーフレームをもとに、作っていくのでここではビジュアルのテイストに絞って書いていきます。 1.色のイメージ ディレクターが色のイメージを伝えて、デザイナーがデザインを作っていく方法です。今でこそ互いのイメージしているものを理解

こっちの色でも、そっちの色でもどっちでもいい。でも、どちらも腑に落ちない。 僕にはこんな経験がよくあります。一人問答をしてそれでも納得できないとき、最終的には周りに相談します。その際に相談するときにはある程度自分のルールを持っています。今日はそのときのルールを紹介してきます。 自分は何に悩んでいるのか分類する バナーがしっくりこない トップページのメインビジュアルが周りから浮きすぎて見えてしまっている 全体的にのっぺりしてる感じになってしまう デザインをする上では山ほどの悩みを解決しながら制作をしますが、僕の場合はざっくり4つに分けて考えるようにしています。 人によっては違うかもしれませんが、問題がだいたいどこにあるのかを見当つけることで、相談するためのポイントがはっきりします。 相談相手に何をして欲しいのかゴールを決める ただ「わからない」というだけでは、相談相手も困ってしまいます。自分

長年一緒に仕事しているディレクター、Webディレクターズマニュアルの@cafekentaにいつも口酸っぱくお願いしていることをまとめてみました。限られた時間で高いクオリティ、高いモチベーションを維持して納品したいので僕は彼に5つのお願いをしています。 1. ディレクター自身が納得できてから依頼をしてください わからないことをわからないまま依頼しても、視覚的にコンテンツの理解を助けようとするデザイナーは、ただただ混乱し時間がかかってしまうだけです。僕は必ず「で、結局何がしたいの？」と必ずディレクターに投げ返し、その意図を確認します。 事前に電話一本入れてお客様に確認しておけば済むことを、勝手な憶測だけで進めてしまい結局作り直しになったケースを何度も見ています。 2. わからなければ相談してください ワイヤーが決まらないとき、導線設計に納得いかないとき、わからなければ相談してください。ディレク

Macのフリーソフトばかりが取り上げられるけど、僕は6年間ひたすらWindows…。ちょっとうらやましくも思いながらも、原稿のやりとりというただ一点でMacBookAirを個人的に買っても本格的に移せないしばっちです。 WindowsのソフトというとAdobeソフトやら秀丸やらDropboxなどの定番ソフトが取り上げられているけど、もっと仕事に役立つソフトもいっぱいあります。今日は小技的に便利なフリーソフトを13本紹介します。Windowだって捨てたもんじゃないですよ！ 1.Windowsのフォント管理ソフト決定版！「フォントインストーラーSAKURA」 フォント管理ソフトです。フォントビューワにもなりますが、フォントを一時インストールできるのが個人的に大きなポイント。フォントを持ってるだけインストールしてしまうと、いざフォントを選択するときに関係ないフォントで選択肢が埋まってしまって、し

ディレクターの提案資料を読んでから案件に取りかかることが多いと思います。おかげでさまでデザインの方向性が決まりやすいのですが、他社のディレクターやお客様サイドに立ってる人の提案資料ってどんな感じなんだろうと思って調べてみました。 特定のお客さま向けのものや、どんなお客さまに向けても使えるものまのまで色々見ましたが、自分で「ここならお仕事頼んでみたい！」と思うものを基準にピックアップしてみました。 企画書・提案書 西野有香さんのポートフォリオサイト 広告の企画書や、ロゴ、タイポグラフィ、パッケージとたくさんの種類があります。最終的な形にした経緯が素敵。ロゴを作るにあたって競合もしっかり調査されているのがよくわかります。 サイト：西野有香さんのポートフォリオサイト 村上由未子さんのポートフォリオ コンペ時の提案書のようです。要望を整理し、それらの要望に対してどのようにアプローチをしていくかが、