カテゴリー: デザイン

Typekitでサイトのフォントを手軽に綺麗にする

2017年10月23日


TypeKitを使えばドメイン管理者なら無料でサイトのフォントを美しくすることができます。
Adobe Typekit
https://typekit.com/
TypeKitはAdobeのWebフォントサービスです。Webフォントを使うことでユーザの環境に依存せず統一したフォント表示ができます。（一瞬表示にラグがありますが）

Typekitの使い方

まず、Adobe IDを作る必要があります。無料です。
Adobe ID の作成方法
https://helpx.adobe.com/jp/x-productkb/policy-pricing/cpsid_92722.html
IDを持っていれば、Typekitのサイトでログインするとフォントの一覧が表示されます。
フォントを参照
https://typekit.com/fonts

任意のフォントをクリックするとこのような画面になるので、右上の「キットに追加」をクリックします。

ちなみにこのサイトでは源ノ角ゴシック（Source Han Sans）を使用しています。
「キットを作成」に進みます。

ポップアップウインドウが出るので、サイト名とドメインを入力します。無料アカウントの場合は1つのみ指定できます。

SCRIPTタグでできたHTMLコードが表示されるので、これをサイトのHEADタグ内に記述します。HTMLコードはユーザごとに異なります。

完了画面が表示されます。この時点ではまだフォントは反映されません。先ほどのHTMLコードを埋め込んで、CSSでフォント指定し、右下にある「公開」をクリックすると初めて反映されます。

サンプルCSSは完了画面の左上にある「CSSでフォントを使用」をクリックするとこのように表示されます。埋め込みHTMLコードとCSSはいつでも確認できます。

以上です。
それでは素敵なフォントライフを！

smackdesignのnookを自作する

2017年10月15日


smackdesign: nook
この、部屋の隅に取り付ける時計を自作してみる。
完成品はこんな感じ。

費用：4394円

手順：

  • 塩ビ板をカットする
  • 面ファスナーを貼り付ける
  • ムーブメントを取り付ける
  • 台座に糸を縛り付ける
  • 部屋の隅に固定する

まずは大きさを決める。うちの場合は取り付け位置に梁の出っ張りがあったのでそれを考慮して一辺が41cmの正三角形で作成した。45cm×60cmのパネルからちょうど取れるくらいの大きさになった。

カットする。低発泡塩ビ板は柔らかいのでカッターを何度か当てれば切れる。板は厚さ5mmだと切りにくく、2mmだと強度が落ちてたわむので、3mmくらいがちょうどいいのではないかと思う。

正三角形のが時計盤、穴の空いているのが台座。台座の方を2mm～3mmくらい小さめにカットすると最後の固定時に隙間が小さくなる。

カットしたら時計盤と台座を貼り合わせるために面ファスナー（いわゆるマジックテープ）のシートを貼り付ける。シートは片面が接着テープになっている。


中心に穴を開け、ムーブメントと時計針を取り付ける。

台座の一辺にたこ糸を縛り付ける。

部屋の一番隅によーとを取り付け、たこ糸で吊り下げて台座を固定する。縛り方は落ちなければいいので適当に。

時計盤を台座に接着させて完成。

とても気に入っている。

古巣のリニューアルによせて

2011年12月30日

私が学生時代に運営していたウェブサイトがもうすぐリニューアルするらしい。
http://www.tsukunavi.com/
（※現在はリニューアル予定日の1/1へのカウントダウンが表示されている）
ツクナビ 20111214時点のキャプチャ
(2011/12/14時点のキャプチャ)
現行のデザインを作った者としては、それがスクラップされるというのはとても嬉しく、そして少しだけ寂しい。
作ったといっても、当時デザインリニューアルしようというただの言い出しっぺになっただけだ。その延長でプロジェクトメンバを募ってコンセプトデザインをまとめ、ウェブデザインに優れた先輩に原案(Illustratorで作ってもらった)を考えてもらい、それを自分なりにチューニングしてコードに落とし込んだ、というのが実情である。基本構造は当時のプロジェクトメンバの議論の成果だし、この「ツクナビらしさ」のデザインの基礎は先輩が作ったものだ。
しかしリニューアルに至るまで数ヶ月間はこうした画面配置とにらめっこをしていたようなものなので、誰よりもこのデザインに思い入れが深いということは主張しておきたい。
このデザインができたのは私が大学2年か3年かの夏だから、7年ぐらい前のことだ。
ウェブの世界で7年と言えば遠い昔だ。当時はTwitterやFacebookといったSNSもなかったし（スタート間もないmixiの存在を知ったのはこの仲間たちからだ）、Amazon.co.jpやYahoo! Japanも野暮ったいデザインだったし、学生がウェブで集まる場所といえば2ちゃんねるだった。
ウェブ技術的にはJavascriptが嫌われ、HTMLはXMLに統合されると言われていた。テーブルタグを使った固定HTMLが全盛で、(Movable Typeはクールな存在だった)、ブラウザと言えばIE6で(Firefox 0.8とかOpera 7.5は超マイナー)、主要ウェブサイトはURLに携帯電話向けサイトのためのサブディレクトリ(/iとか/j、/ezなど)を用意していた。スマートフォンなんて日本上陸してなかったし、Photoshop派とFireworks派がいたし、アフィリエイトはまだ普及してなくてウェブ広告と言えばクリック報酬型のバナー広告だし、ライブドアといえば無料プロバイダだし、ネットランナーはWinnyの特集をやっていたし、無料メールマガジンはまだ影響力を持っていた。すべて遠い昔の話だ。
現行のデザインはそんな時代に合わせてデザインされた。
テーブルタグを廃したデザインとか、外部スタイルシートを使うとか、横幅800pxに収まるとか(当時の解像度は1024×768が主流)、FirefoxやOperaでも表示が崩れないとか、透過PNGを使うとか、W3Cのテストに通るようなデザインというのは当時としては画期的だった。
そんな今や時代に取り残されたようなデザインを、現代に合わせて今回新しくしようということになったのは素晴らしい。
何よりも、自分たちのいた場所が、7年経ってもこうして残っているのは素敵なことだと思う。
これからどう変わっていくのかを見るのが楽しみだ。

意味なく架空のタイトルロゴを作ってしまうテスト

2006年3月6日

続くかもしれない企画。グラフィックソフトを駆使して素人が架空のロゴを作ってみよう実験。今回はエロゲと関係ないものをエロゲ風にアレンジしてみました。
男はつらいよ 寅次郎あじさいの恋
まずは名作映画のタイトルをろりぷに系ロゴに。
ポップ体フォント、鮮やかな色遣い、そしてCG背景の3点を押さえるとそれっぽく見えます。
Continue reading 意味なく架空のタイトルロゴを作ってしまうテスト

バーコード時計、デザイン電話機など

2005年7月27日

amana :「伝える」から「伝わる」へ
画像制作会社のPRページ。静かな音楽とムービーが流れる時計のようなFLASH。
Bar Code Clock
バーコードで表示する時計。
デザイン電話機
ニューヨークの電話機事情。
WordPress Styles
WordPressテーマのデザインコンテスト。
ライトセイバー
スターウォーズのアレをFLASHで実現。やみつきになる。

最近のメモ

2005年5月25日

ローカルに残していたメモ書きやショートカットを大幅整理。デザイン関係のものをまとめてみた。

実用

色のみじん切り
普段から使っているWeb用の色見本帳。彩度別明度別から星形に並べた色見本のほかカラーチップやグラデーションツールなども分かりやすく装備されていてほぼ困ることはない。
WEB COLOR 216
色名で指定できる一覧表や、10進数での指定やRGB比率との一覧表が役に立つ。上のが希望の色を見るのに使いやすい「ツール」であるのに比べて、こちらは配色や配分や指定方法を知るのに使いやすい「解説」に近い。
Continue reading 最近のメモ