2018年用、日本語のフリーフォント332種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記
個人でも商用でも無料利用できる、日本語のフリーフォント332種類を紹介します（公開時より、3+18個増えました）。 ビジネスからプライベートまで、幅広く利用できる無料フォントが満載です！ 去年は260種類だったので、今年は大幅に増えています。 中には、配布先が変更されたフォント、配布終了になってしまったフォント、無料でなくなったフォント、ライセンスが変更されたフォントもいくつかあります。 最新版を公開！フォントの数が大幅に増えています。 2020年用、日本語のフリーフォント 417種類のまとめ 初紹介のフォントから既存フォントも改めてリンク・ライセンスを確認しています（※情報はこの記事の執筆時のもの）。ライセンスはWebデザインだけでなく、同人誌や印刷物などでの利用も確認しました。
すごく分かりやすい！デザインやコンテンツ設計の 面からアクセシビリティへの取り組みを解説したWeb制作者必読書
アクセシビリティって、スクリーンリーダーに対応することでしょ、間違いではありませんがそれはほんの一部です。 分かりにくいナビゲーション、思ったように操作できないインタラクション、入力が困難なフォーム、内容が理解しにくいコンテンツなど、すべての人が快適にアクセスできるよう改善の手助けとなるオススメの本を紹介します。 本書は以前紹介した「コーディングWebアクセシビリティ（紹介記事）」の姉妹書で、「コーディングWebアクセシビリティ」はスクリプトを使用したWebアプリが中心でしたが、今回の「デザイニングWebアクセシビリティ」はHTMLとCSSで作られた静的なWebページが中心になっています。 発売は、週明けの27日予定です。早いとこだと週末に書店に並んでいるかもしれませんね。 追記（2015/7/24）：書店行ったら、ありました。
商用利用無料！和の伝統的な柄や風物詩などがたくさん揃った完全オリジナルのベクター素材 -Japan Vector
菱・籠目・雪輪・矢絣・唐草・亀甲・紗綾形などの和柄をはじめ、季節の風物詩や伝統的なものなど、日本の伝統に基づいたさまざまな無料ベクター素材を紹介します。 Japan Vector 素敵な和柄のフリー素材を探している人は、下記ページのまとめも参考にどうぞ。 商用利用無料、日本の伝統的な色使いが美しい和柄のパターン素材やテクスチャ素材のまとめ 素敵なグラフィックが多いので、管理者様にメールで連絡を取ってみました。 作成しているのは日本人のユニットで、すべてオリジナルの作品、少しずつ素材を増やしています、とのことでした。 素材の利用にあたっては個人でも商用でも無料、クレジットの表記は特に必要ないが記載してもらえると嬉しい、とのことです。 ダウンロードできる素材のフォーマットは、4種類。 .ai .eps .pdf .jpg（プレビュー用） 以下、数多くある素材の中からいくつか紹介します。 菊や桜
ブラウザーの3D表現もここまで来た！WebGLを使った驚きのWebサイト
ブラウザーで3次元コンピュータグラフィックスを表... / WebGLを使った3D表現 / SculptGL他...全13件 ブラウザーで3次元コンピュータグラフィックスを表示させるための標準仕様「WebGL」。Microsoftも重い腰を上げ、次期バーションの「IE11」からWebGLを標準サポートすることが決定しています。これからますます目にする機会が増えそうです。 そんな、圧倒的な3D表現が可能なWebGLを使った驚きのWebサイトを集めました。
floatを解除する手法のclearfix と 次世代のレイアウトの話
floatを解除する手法のclearfix と 次世代のレイアウトの話 2013-06-20 / 2013-06-30 2011年にclearfixについて記事を書きましたが、Micro clearfixなどの新しい手法も出てきました。 記事を書いてから2年が経ち、色々思うところも出てきたので、改めてclearfixについて書きます。 floatを解除するには CSSでレイアウトの構築を行う際に、よくfloatプロパティが用いられます。 しかしfloatを使用すると、「親の背景が表示されない」「下の段のレイアウトが崩れる」などのトラブルが起こりやすくなります。 floatプロパティの特性 親の背景が表示されない理由は、floatプロパティを指定しているボックスが浮動化し、通常のボックスのフローから外されることが原因です。 通常フローから外されたボックスは、親のボックスの高さを認識できなくな
DIV一個で洒落たボックスを作ってみる！最近知ったCSSを使ったボックス装飾とか色々！ | バンクーバーのうぇぶ屋
CSS3からDIV一個で出来る表現なんかも色々あるんですね。ちょっと前まで超面倒だったボックスのオシャンティーな線の装飾とかぼかしとかグラデになんやらかんやら。DIVボックス一つとっても色々な装飾効果をもたせられるなぁと思う今日この頃。 それこそ、ONE DIVのような一つのDIVで表現できるアイコンを作ってるサイトもあって、CSS3を突き詰めると色々知ることも出来て面白いなぁと思うわけです。 っていうわけで、ONE DIV程凝ったことはできませんが、今日はそんなDIV一個で使えそうなボックスの作り方をいくつかご紹介！擬似要素使ってちょっとちょめちょめしたら縫い付け効果のボックス出来たりと、以外と使えそうなものを選んだつもりなので、一度見てみてもらえると嬉しいです！ちなみに、IEチェックは9だけしてます。8とかはCSSPIE当たりで頑張ってなんとかする方向で…何か変なとこあったら直しますの
デザイン時に注意したい角丸の使いかた - Design Color
もくじ 大きな角丸はあまり使わないほうがいい理由 要素によって角丸の大きさを使い分ける理由 大きめの角丸でもおかしくない場合は？ 角丸の大きさを後から調整するPhotoshopプラグイン はじめに なんとなくで使っていたけど、一度ちゃんと考えてみよう！と思わせてくれたきっかけは、こちらのスライドでした。 今回は、こちらのスライドの角丸についての部分に沿って考えていこうと思います。 少ない手間と知識でそれなりに見せる、ズルいデザインテクニック 大きな角丸はあまり使わないほうがいい理由 「ズルいデザイン」のスライドでは、「角丸は5〜6pxくらいが最も無難でキレイ」とのこと。また、下記のようにも言われています。 「R半径が大きい角丸は、野暮ったいデザインになりやすいので、あまり使わないほうがよいです」 引用元：少ない手間と知識でそれなりに見せる、ズルいデザインテクニック たしかに、私も以前に、デ
アイデア力を高める！ 誰でも簡単！ビジュアルブレストのススメ
アイデア力を高める！ 誰でも簡単！ビジュアルブレストのススメ：一撃デザインの種明かし（7）（1/3 ページ） ビジュアルブレストって？ アイデア出しの手法として、ブレーンストーミングがあります。 「ブレスト」と省略されることも多いブレーンストーミングは、5〜10人程度の参加者によるアイデア発想法の1つ。参加メンバーが自由奔放にアイデアを出し合い、互いの発想の異質さを利用して、連想を行うことによってさらに多数のアイデアを生み出そうという集団思考法・発想法です（参照：ブレーンストーミング＠情報マネジメント用語事典）。 今回紹介する「ビジュアルブレスト」とは、言葉やテキストではなく、絵やイラストなど用いて、アイデアをビジュアライズしブレーンストーミングをする手法のことです。例えば、ロゴデザインのアイデア出しに使ったり、またはプロダクトのデザイン、WebサイトのGUIなどなど、さまざまなシーンで活
WEBデザインに質感を与えてくれるシンプルなフリーパターン素材15「15+ Free Patterns for your Designs」
背景やエリアなどに敷くパターン素材。無機質なWEBデザインに質感やクオリティをプラスしてくれる非常に便利な素材です。今日紹介するのはシンプルなフリーパターン素材を集めたエントリー「15+ Free Patterns for your Designs」です。 Subtle Light Tile Pattern Vol5 様々な素材のパターンがまとめられています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。 詳しくは以下 Wood Pattern Background シンプルめな木目のパターンがセットになったパターン素材。 Subtle Grunge シンプルなシロ系のグランジ素材。ちょっとだけ質感を持たせたいときにおすすめです。 Lined paper ノートの罫線を表現できるパターン素材。コンテンツエリアに利用しても面白いかもしれません。 上記の他にも様
秀逸なウェブサイトたくさん！Site of the Year 2012のノミネートサイトを全部紹介
世界中の素晴らしいウェブサイトの中から最も素晴らしいウェブサイトを投票で決める「Site of the Year 2012」の候補となったウェブサイトを全て紹介します。
面倒なシャドウもグラデも簡単に作成できるCSS3のボタンを作成するジェネレーター -CSS Button Generator
ボタンのカラー、グラデーション、角丸、ブラー、テキストシャドウ、ボックスシャドウなど、さまざまなスタイルを簡単に適用できるCSS3のボタンを作成できるオンラインツールを紹介します。
[CSS]斜めのダイヤモンド状のグリッドを実装するスタイルシート
画像やスクリプトを使用せずに、スタイルシートだけで斜めのダイヤモンド状のグリッドを実装するチュートリアルを紹介します。 デモページ：480pxで表示 実装 実装の準備 CSS3をサポートしているか判別するためにModernizeを使用します。 実装にはSassを使用します。 ダイヤモンド一つ まずはダイヤモンドを一つ実装してみましょう。 HTMLはdiv要素をa要素で囲みます。 <a href="#" class="diamond"> <div class="content"> Diamonds Are Forever </div> </a> CSSは下記のようになります。 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } $diamondSize: 190p
美しいラインを描くPhotoshopのチュートリアルのまとめ
背景やアクセントにぴったりな美しいラインを描くPhotoshopのチュートリアルを紹介します。 壁紙素材：Energy flow background 以下、Photoshopのチュートリアルです。
[CSS]パタッと開くアニメーションがかわいいボタンを実装するスタイルシート
マウスオーバーでパネルがアニメーションでパタッと開き、中から現れるボタンを実装するスタイルシートのコンセプトを紹介します。
新しいものを制作できる予感！垂直・水平のリズムを大切にしたレイアウトを組み立てるフレームワーク -xy.css
Documentation -xy.css Step 1: ダウンロード xy.cssを下記ページからダウンロードします。 ダウンロード -xy.css Step 2: 水平のグリッド設計 HTMLは非常にシンプルで、classなど余計なものは一切ありません。 <header></header> <article></article> <aside></aside> <footer></footer> 天地にヘッダとフッタ、コンテンツとサイドバーを2カラム水平に配置します。 header, footer { width: 100%; } article { width: 66.6667%; float: left; } aside { width: 30.769231%; float: right; } Step 3: 垂直のグリッド設計 articleとaside内に、見出しとパラグラフ
商用利用可バックリンク不要、全296種が揃ったシンプルデザインのミニマルなアイコン素材 -Minimalist Icons
商用利用可バックリンク不要、全296種が揃ったシンプルデザインのミニマルなアイコン素材 -Minimalist Icons
無料で使える！人気の日本語フリーフォント20選【おすすめ】
こんにちは！ 日本語のフリーフォント、なかなか良いのが見つからなかったり、どれがいいか迷ってしまうことってありますよね。 今回は、フォントで悩むデザイナーのために、人気の日本語フリーフォントを20個厳選してみました！ 新しいフォントから古いフォントまで様々なフォントがあるので、是非、チェックしてみてください。 1.はんなり明朝 フリーフォント界で有名な明朝体です。 不動の人気を誇っていますね。アクセス数も一番です。 →はんなり明朝 2.大甘書道体 テレビアニメ銀魂の次回予告タイトルに使われている、豪快な毛筆体です。 特に銀魂ファンには嬉しいフォントですよね！ →大甘書道体 3.あんずもじ 言わずと知れた手書きフォント。控えめな女の子が書いた文字っぽくて可愛くて人気がありますね。 →あんずもじ 4.うつくし明朝体 横書きの流れを意識して作られた明朝体フォント。 上品でリッチな雰囲気があります
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
新着記事
Twitter Bootstrapのテーマをオンラインで作成出来るツール・Bootstrap magic
