はてなブックマーク

Noto Serif CJK JPのウエイトはNoto Sans CJK JPと異なります。ウエイトはゴシック体より少ない7ウエイトが用意されています。 Thin 250 Light 300 Regular 400 Medium 500 SemiBold 600 Bold 700 Black 900 以上、7ウエイトが用意されています。Noto Sans CJK JPに用意されている「DemiLight 350」というウエイトがNoto Serif CJK JPでは用意されていません。

UIを制作するベストなアプリ、とばかりに普及したSketch。最近はHTMLコーディングに役立つSketch Pluginも増えてきました。 本日は、デザイナー視線ではなく、コーダーやプログラマー的な立場からみた、コーディングを10倍早くするSketch Pluginを紹介します。 はじめに紹介するのは、「Make Exportable」というプラグインです。画像の「Export」を爆速にするプラグインです。 Retina Displayのような高解像度ディスプレイも今や当たり前になり、画像を利用するときにも@1xや@2xなど、1つのレイヤーから複数種類の画像形式のファイルやサイズの書き出しをするのが当たり前になりました。 しかし、Sketchでは、そのような作業を行うときに欠点があります。複数の種類の画像形式のファイルやサイズの指定を一つ一つおこなうにはかなり面倒です。 そのような時に「

最近ビジネスモデルを少し変えまして、基本的に「受託でのWebサイト制作」は半分以下に減らして「UIデザイン」や「コンサルティング」をベースにした案件だけに事業の軸を絞りました。そこで、その理由などをしみじみと書いてみたいです。 正直、「受託でのWebサイト制作」、いわゆる「広告的なホームページを作る」案件がメインでお仕事をやっているWeb制作会社、フリーランスは多いです。しかし、「UI」や「UX」に特化した企業はまだ多くありません。ましてや「UI」や「UX」などに特化しているフリーランスはほとんどいません。 10年前は、Webサイトをつくるときは、「自社を紹介するホームページを作る」「広告的なホームページを作る」 案件が多かったです。管理画面などの案件はほとんどなかったと言っていいでしょう。 しかし現在では、「自社を紹介するホームページを作る」「広告的なホームページ」が必要な企業はたいてい

あけましておめでとうございます。 つい先日から、お声がけいただいた某社さまをお手伝いすることになりました。社員ではなくて、業務委託のデザイナー兼コンサルタントとして働いています。しばらくやってみて、やっぱりWebデザイナーの格差が今後広がっていくと感じられてきているので簡単に書いてみたいと思います。 知っている人からすると、意外（？）なことにサービス画面や管理画面のデザインではなく、ブランディングから入ってサービスサイトの改善などを行うお仕事です。久しぶりに管理画面の制作の案件をほとんどやっておりません。 クライアントのサイトの診断を行ったのですが、ちょっと大変な状態でした。 まず、一般的に当たり前と思われるところができていません。 ぶっちゃけ、ちょっとこれ最初にやった会社さんとかひどくない？と思っていたりします。 色々改善をおこないますが、改善箇所が多すぎるので、とりあえず急ぎで行うべき

最近、Adobe製品を全部消してしまって仕事しています。Adobe製品ではない、次世代ソフトで仕事をしていますが、Webデザイナーがいわゆる「脱Adobe」するとどうなるかなどを書いてみたいと思います。第3回目は実際に「脱Adobe」してみてでてきた課題を書いてみたいと思います。 「Sketch」でUIカンプデータを作成するときに問題になるのは、データの受け渡しです。コーダーやフロントエンドエンジニアがMacユーザーなら、「Sketch」を使ってくださいといえば問題ないのですが、Windowsユーザーなら多少問題があります。 現在「Sketch」を利用している案件はカンプデータをPDFとPNGでエクスポートしてコーダーやフロントエンドエンジニアに渡しています。データ自体も作業指示を記載したもの、作業指示を記載していないもの、2種類を渡しています。 「Sketch」ではCSSも書き出せるため

最近、Adobe製品を全部消してしまって仕事しています。Adobe製品ではない、次世代ソフトで仕事をしていますが、Webデザイナーがいわゆる「脱Adobe」するとどうなるかなどを書いてみたいと思います。第2回目は実際に「脱Adobe」してみてでてきた課題を書いてみたいと思います。 Webサイト制作では、レスポンシブWebデザインが一般化しつつあります。 レスポンシブWebデザインの案件が増えることで、ベクター形式で納品を指定されたり、素材を支給される事が多くなりました。 ベクター形式の素材を取り扱う場合、データファイルに「PDF保存オプション」を指定しているかどうかが鍵になります。 ファイルをAdobe illustrator形式やEPS形式などに保存するときに「PDFデータ」が含まれている場合は、他のアプリケーションで開ける確率が高くなります。 Adobe illustrator形式のフ

最近、Adobe製品を全部消してしまって仕事しています。Adobe製品ではない、次世代ソフトで仕事をしていますが、Webデザイナーがいわゆる「脱Adobe」するとどうなるかなどを書いてみたいと思います。最初は「脱Adobe」するためのラインナップしたソフトを紹介したいと思います。 Webデザイナーやコーダー・フロントエンドエンジニアなど必須なソフトといえばまず、「Adobe」社の製品が上がってくると思います。「Adobe Photoshop」や「Adobe Illustrator」を使わずに仕事している人はほとんどいないと思います。 ただ、「Adobe」社の製品は、「高い」とか「Adobe税」とか揶揄されています。 それゆえに「脱Adobe」したいデザイナーが多いと思いますが、実際に「脱Adobe」している人のレビューを見たことがないので書いてみました。 実際にAdobe製品を全部消してし

「Affinity Photo」は名前からも分かる通り、2014年にリリースされたMac用のデザインアプリ「Affinity Designer」の姉妹ソフトです。 プロフェッショナルな画像編集ソフトとされ、CMYK、LABカラー、チャンネル毎の16bit編集、ICCカラープロファイリング、PhotoshopのPSDと64bitプラグインなど、様々な機能が最初からサポートされています。また、滑らかなパフォーマンスや、タスクに集中するために整理されたワークスペース等、使い勝手の面にもこだわりを持って作られています。

久々に管理画面の案件をがっつりやりたくなったので、週2常駐を再開しました。今回は作業時間の関係などでフロントエンド・コーディングは基本やらず、UIデザインだけの担当です。 いままでもちょこちょこ使っていたけど、今回の案件で、Sketchを本格的に使ってみたのでちょっと良かったところなどをレビューしてみます。

「Photoshopしか使えない」Webデザイナーとは、「お絵かき」「見た目」だけにこだわるデザイナーのことです。ビジュアルデザイン以外の付加価値がないデザイナーは今後は生き残ることは難しいです。 今ではWebサイトを作ることが当たり前になりました。 それどころかスマートフォンの普及でレスポンシブWebデザインで作るサイトも当たり前になっています。また、ASPでWebサイトを作るサービスも増えています。JIMDOなどが代表的な例でしょう。 普通に「Photoshopしか使えない」だけのデザイナーは、もう生き残れるのは難しいでしょう。

トップページにアクセスした時に、ブラウザの言語ロケールが「ja」でないときには英語版ページ（今回は「en」というサブディレクトリ）にリダイレクトするという仕様です。 Google先生で調べたら、いちおういくつか書いてあります。 言語別にサブドメインに切り替える 言語別にディレクトリをわける（「ja」フォルダと「en」フォルダ） しかし、ブラウザの言語ロケールが「ja」でないときにはサブディレクトリ）にリダイレクトするという仕様のものがなかったのでちょっと調べてみました。 まとめ

MarvericksからYosemiteになりました。Safariもバージョン8になりました。 しかし、CSS transformを指定した時にちらつく問題が新しく出てきているので解消法を書いてみます。

【CSS】iPhone 6 / 6 Plusの画面にのみ効かせるスタイルシートの書き方。という記事が、正しい内容ではないのでちょっと書いてみたところもあります。 この記事の場合には、「縦幅」のみ記載してあり、おまけにiPhone 6 Plusの画面サイズが記載されています。 実際には、iPhone 6とiPhone 6 Plusは画面サイズは違います！ iPhone6の画面サイズ 縦幅（device-width） – 375px 横幅（device-height） – 667px Safariでの表示領域（縦表示）- 559px iPhone 6 Plus の画面サイズ 縦幅（device-width） – 414px 横幅（device-height） – 736px さらに設定によって画面サイズが違う

annotator.jsとは、注釈作成用のjQurryプラグインです。 現在世の中にある注釈作成関係のプラグインではいちばん使いやすいと思います。 ショーケースページではいろいろなサイトが紹介されています。 使ってみましたが、使い勝手はなかなかなものです。 ただし、カスタマイズをしたいという話になると、とたんに最強レベルに面倒なプラグインです。

OS X Mavericks をインストールしていたけど上書きアップデートだしということでMacBook AirにOS X Mavericksを上書きインストールしたのですが、Apple IDの90日タイマー（孔明の罠、でなくAppleの罠）なんていうものがあったので、備忘録を兼ねてメモ。 Apple IDが複数あるとiBooksで厄介な問題が起きます。「Apple IDの90日タイマー」というものです。 Appleサイトにいつのまにか、「iTunes Store：デバイスやコンピュータを Apple ID に関連付ける」というページができていました。どうやら、「iTunes in the Cloud」が日本で始まったときからこの制限は始まったようです。 「iTunes Match や自動ダウンロードを有効にしたり、以前購入した項目を iOS デバイスやコンピュータにダウンロードしたりする

そもそも、「なぜ」？デザイニング・イン・ザ・ブラウザで？という部分を語ってみます。 「レスポンシブWebデザイン」。PhotoShopやIllustratorの画面ですべてのブレイクポイントを作るのですか？ 古いブラウザの退場。「窓から投げ捨てたいとか、親から見捨てられたとか、腐った牛乳とか言われたブラウザ」がようやくほぼ完全に退場しました。ブラウザも新しい世代が主役になっています。 「CSS3」。PhotoShopやIllustratorを使わなくても、リッチな表現が可能です。最近は古いブラウザでは表現できない動きがいろいろなサイトで見られます。 「JavaScript」。動きはPhotoShopやIllustratorでは表現できません。特に「UI」や「UX」が重視されるWebアプリやiOSアプリ（HTML5での制作）の場合には。また、プロトタイプツールでもその部分に関しては変わりませ

サイトをリニューアルしたりするときに、参考にするサイトはどんなのだというのを隠すなとかいろいろと、どこかのUI会社の中の人に言われたので、たまにはどんなサイトを参考にしているかを紹介します。 もちろん案件の費用はもらうけど、開発期間が短くていろいろ問題なので時間をみて空き時間に作ったわけです。こんな機能を。 パララックス（デスクトップのみ） IE10+対応のタッチデバイス判別（誰かのコードをカスタマイズ） ページローディング Webフォント対応のフェードインアニメーション （Webフォントが適用されたときにフェードイン表示） さようなら、jQuery。jQueryを使わないでいろいろ実験してみました。最近は面白いプラグインも出てきていますね。 日本のサイトだとなかなかこれらのものをおしゃれに軽く作っているところがありません。 よって、どうしても海外のサイトを参考にすることが多くなります。

シンボリックリンクとは、あるファイルやディレクトリに別の名前を与え、ユーザやアプリケーションがその名前をファイル本体と同様に扱えるようにする仕組み。 by シンボリックリンクとは - IT用語辞典 Macのシンボリックリンクを作るときには、SymbolicLinkerが簡単です。 ダウンロードしたディスクイメージを開き、中にある「SymbolicLinker.service」をホームフォルダ以下の、「Library」→「Services」フォルダに入れればOKです。 DropboxとCopyが同時に障害を起こさない限り、どちらかのサービスに障害が起きてもファイルを別のマシンからアクセスできるようにしておけば、最低でも最新のファイルにはアクセスできると思います。この方法では、Dropboxをメインの同期環境、Copyをバックアップ兼予備同期環境として運用します。 普段はDropboxをメイン

nth-child/nth-of-typeで最初の行の項目のみ、1行で要素を反映させる方法があるので紹介します。 というか、書かないとこっちが忘れそうなので備忘録として（笑）

select要素をlabel要素で囲みます。 今回はアイコンフォントをCDN（コンテンツデリバリネットワーク）のサービスから読み込ませています。「entypo-down-open-mini」というクラスは、アイコンフォントを表示するのに使っています。この部分はclass名を変更したりしてください。 アイコンフォントはコントロールの部品を表示するのに使います。コントロールの部品を表示できるのなら別にSVGでも背景画像でも、ご自由にカスタムするのがいいでしょう。 スケーラブルな表現のために、remを使って拡大縮小できるようにしています。 label要素のクラス「select-wrap」でスタイルを指定します。 select要素に「z-index:2;」、label要素のbefore擬似要素に「z-index:1;」を指定します。 select要素にはpadding以外は背景色、枠線などをすべて

最近、レスポンシブWebデザインのお仕事はやっていますが記事は書いていないので、ちょっとしたネタとして、レスポンシブWebデザインのお仕事で使える改行テクニックを紹介します。 レスポンシブWebデザインで考慮すべき「改行」とはなんでしょう？ レスポンシブWebデザインでは、画面に最適化された状態でコンテンツが表示されます。そのため、従来と違い、任意の位置で改行を入れる、ということが難しいです。 もちろん、1カ所くらいならいいかもしれません。しかし、時と場合により、改行をある程度制御したいときがあると思います。 また、ブレイクポイントに依存せず、画面サイズに応じた改行制御もおこないたいということもあるでしょう。

年末の制作環境再構築でいろいろ新しいアプリを導入しました。 いままでローカルテスト検証用として使っていたMAMPに加え、新しく VirtualHostX を導入したら超快適なローカルテスト環境ができあがったので紹介します。 VirtualHostXは、MAMP, XAMPP, またはシステムに予めインストールされている Apache のバーチャルホスト設定をGUIで管理できるソフトです。なぜかVersion 1のころから購入しています。 「Mac上に構築したローカルサーバーのURLを生成して、Mac/iOSで共有する」ことができます。 複数のローカルホストの作成と管理ができます（ドキュメントルートの設定を複数できます） 複数のバーチャルホストそれぞれにxip.ioが使えます Auto Refresh機能を搭載（JavaScript）しています（でも、Hammerを使っているから使っていない

今年はできるだけ、「Internet Explorer 9」を窓から投げ捨てる（=サポートを切る）案件を増やしていく予定です。 このサイトもflexboxを使うコードに移行しました。それ以外にも、flexboxをいくつかの案件で使ってみました。そこで得られたノウハウをちょこっとだけシェアさせていただこうと思います。作り方は今回は記載しないのであしからず。 Firefoxで最初に検証しながら制作するのには理由があります。 ちょっと複雑なことをやろうとすると、Firefoxさんだけお行儀が悪くなります。Internet Explorer 10よりもお行儀が悪いです。 同じものをつくるにしても、Firefoxだけできない、できても複雑なコードになることが多くなります。 Firefoxさんにがんばってもらうためのコードを記載しても、ChromeやSafari・Internet Explorerで表

去年やったUI/UXな案件を何件かやらせていただきました。 ある案件で「CSS3を使ったローディングなビジュアル」を使ってみたらどうかと提案してみたらお客さまが採用していただいたのですが、そのとき調べて「イイ感じ」と思えたローディングなCSSのコードをいくつか紹介したいと思います。 Pure CSS3 Loading Spinner CSS3 Loading Animation Metro style loading animation in pure CSS Loading Middle Spin CSS astral loader Animated CSS Loader Simple Gray Jet Loading Ripple css loader (pulse) Tiny loader CSS3 Loading Animation iOS GMail Loading Animat