フォントが大好物な人におすすめ！チェックしておきたい日本語の新作フリーフォントのまとめ
最近リリースされたひらがな・カタカナ・漢字が使える日本語の新作フリーフォントを紹介します。 昭和レトロなフォント、縦書きの本文に適したフォント、タイトルやコピーにぴったりなデザインフォントなど、たくさんのフォントがリリースされています。 最近のだけでなく、これまで全部の日本語の無料フォントは下記をどうぞ。 2019年用、日本語のフリーフォント 366種類のまとめ 最新のフリーフォント、まずはかわいいデザインの「ポプらむ☆キュート」から。 ポプらむ☆キュート 個人・商用サイトで無料利用可。同人誌や各種印刷物なども可。 かわいいの波及を追い求めて作成された「ポプらむ☆キュート」 通称ブリッコ文字・マンガ文字と呼ばれた昭和時代の女子校生に流行ったコミカルな変体のまる文字で、現代風のテイストを入れつつ、デジタル用にアレンジしてデザインされています。 ひらがな・カタカナ・英数記号文字だけでなく、JI
使い勝手のよい繊細なパターンの透過テクスチャ素材を探す時はここが便利！ -Transparent Textures
さまざまなカラーにマッチする繊細なパターンの透過テクスチャ素材をコレクションしている「Transparent Textures」を紹介します。 もちろん、全てシームレスに利用できます。
デキるデザイナーはみんな使ってる！背景にすぐ使えるすごいデザインテクニックのまとめ
画像や文字などを配置する時、背景をどのようにするかでデザインは劇的に変わります。 Webや紙のデザインに効果があり、すぐに使える背景のすごいデザインテクニックを紹介します。 Ultimate Guide to Designing With Backgrounds 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 背景のデザインとは ベタ一色の背景 高いコントラストのベタ一色の背景 テクスチャの背景 グラデーションの背景 写真をつかった背景 形をつかった背景 透明の背景 ブラーを適用した背景 カラーをオーバーレイさせた背景 文字のスペースがある背景 パターンの背景 イラストの背景 空白スペースをつかった背景 グリッドをつかった背景 背景のデザインとは 背景はグラフィックデザインを築く基礎となるものです。 テクスチャとカラーはデザインに奥行
[CSS]コンテンツの区切り線、デザインのアクセントに使えるラインやボーダーを実装するテクニックのまとめ
コンテンツの区切りに使用する線、デザインのアクセントに使えるラインやボーダーをCSSで素敵にデザインするスタイルシートのテクニックを紹介します。 borderプロパティを使ったシンプルなものから、グラデーションや疑似要素やアニメーションを使ったアイデアが素晴らしいものまで、コピペで簡単に利用できます。
![[CSS]コンテンツの区切り線、デザインのアクセントに使えるラインやボーダーを実装するテクニックのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/d81709305545d43bf246e62ef8caf6aa8f3b70da/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201604%2F2016120101.png)
美しいフォントは日本の宝、さまざまなデザインで使いやすい日本語フォント「たづがね™角ゴシック」
「たづがね™角ゴシック」をブログの画像にちょいちょい使っていたところ、そのフォントはどこで手に入るのですか？ 無料ですか？ などの問い合わせを頂いたので、その入手方法・購入方法（無料ではないです）、そして今だけお買い得なセットを紹介します。 おそらく、ここの画像でしょうか。 Tazugane™ Gothic -MyFonts たづがね™角ゴシックの魅力 たづがね™角ゴシックの今だけお買い得なセット たづがね™角ゴシックの購入方法 たづがね™角ゴシックの魅力 たづがね™角ゴシックは多くのデザイナーがお世話になっているMonotype社から、2017年1月25日にリリースされた初の日本語フォントです。
2016年用、日本語のフリーフォント219種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記
個人・商用で無料で利用できる、日本語のフリーフォント219種類を紹介します。前回は164種類だったので、大幅に増えています！ 記事公開後も増えています（201→207→211→219）。 年賀状の宛名にも使える縦書き対応のフォント、かわいい手書きフォント、読みやすいゴシックなどが揃っています。 毎年まとめていますが、初紹介のものから既存のものまで改めてリンク・ライセンスを確認しています（※情報はこの記事の執筆時のもの）。 ライセンスはサイトだけでなく、同人誌や印刷物などでの利用も明記。 最新版を公開！フォントの数が大幅に増えています。 2020年用、日本語のフリーフォント 417種類のまとめ フォント紹介の前に各フォント制作者からのお願いごと。 フォントを利用の際には、利用条件やライセンスを必ず確認して守ってください。 Kazesawa フォント 個人・商用サイトで無料利用可。同人誌や各種
普通のHTMLで作成したページの指定箇所のみをブラウザ上から更新・修正できるようにするシンプルなCMS -Sitecake
普通のHTMLで作成したページをブラウザ上から簡単に更新・修正できるようにするオープンソースのCMSを紹介します。 HTMLはごく普通なものでOK、BootstrapやFoundationにも対応しています。 ブラウザ上で編集できる領域を指定できるのもいいですね。特定ページの特定箇所だけ簡単に更新できるようにするとかにも使えます。 Sitecake Sitecake -GitHub Sitecakeの特徴 Sitecakeのデモ Sitecakeの使い方 Sitecakeの特徴 プレーンなHTMLで動作 通常のHTMLファイルをブラウザ上から修正して、保存することができます。PHPやテンプレートなどの知識は不要です。 更新・修正は簡単 テキストを変更する時はクリックするだけで編集可能に、要素を追加・削除する時はドラッグ&ドロップでOK。 データベースは必要無し すべての変更はHTMLファイ
ちょっとした手間で、デザインをちょっとよく見せる小ネタのまとめ
よいデザインとは、ちょっとしたことを積み重ねていくことが大切。 Webデザイン、カラー、PhotoshopやIllustratorなどのテクニックを磨く、デザインをちょっとよく見せる小ネタをDribbbleから紹介します。 画像: Girly Drop 複数のカラーから調和のとれたカラーパレットを作成 角丸パネルを重ねる時、それぞれの角丸をバランスよくする 円をよりくっきり見せる 滑らかなベジェ曲線を描く エレメントをくっきり美しく 斜めの線を使った小さいアイコンを作るこつ レイヤーパネルの設定をカスタマイズ 「ベベルとエンボス」より「シャドウ（内側）」がいい場合 曲線と直線を美しく手描きするこつ 複数のカラーから調和のとれたカラーパレットを作成 広範囲のコントラストをもつ複数のカラーから調和のとれたカラーパレットを作成します。
Web制作者は絶対ブックマークしておきたい、デザインやコーディングに役立つサイトのまとめ
フロントエンドのデザインやコーディング時に調べたり、アイデアやインスピレーションがもらえるお役立ちサイトを紹介します。 最近リリースされた、特に便利なサイトをまとめました。
Photoshopがもっと便利になるすごい機能拡張・プラグインのまとめ
Photoshopは標準機能だけでも便利なツールですが、もっともっと便利になる機能拡張やアクションを紹介します。 定番として入れておきたいものから、特別な使用シーンに使うものまで、優れ物ばかりです。 Photoshopでのガイド引きに欠かせない強力な機能拡張 定番のGuideGuideは3.1.2にバージョンアップ 幅の異なる複数のガイドを一気に作成できる優れ物 Photoshopのスウォッチをフォルダで管理 カラーピッカーを開かずにカラーのコードを簡単コピー 複数のさまざまなオブジェクトのカラーを一元管理 手元の画像からシームレスなテクスチャを1クリックで作成 ビットマップのオブジェクトをベクターに変換 画像にパースをつけてかっこよく見せる パラグラフのレイアウトを段組みに変更 要素のサイズやエフェクトやフォントなどの情報を書き出す エレメントやマージンのサイズを書き出してくれる 黄金比
Gitと仲良くなれる！Web制作者がGitを危なげなく便利に使うためのノウハウを学べるオススメの本 -Web制作者のためのGit入門
GitってなんかコワいっていうデザイナーもGitがいまいち使いこなせていないコーダーもOK！ Gitを危なげなく、しっかりと使うための知識とノウハウを学べる「Web制作者のためのGit入門」を紹介します。 よしっGitをはじめる！ もっと便利に使いこなしたい！ 効率のよいWeb制作の環境に取り組もうとしている人にオススメの本です。実務に必要なノウハウを知ることで、安心してプロジェクトを進めることができるようになります。 Git本は何冊かでていますが本書の大きな特徴は、二人の著者によって書かれていること。入門編と実践編で別々の人が担当されています。 1章は入門編。Gitの基礎知識からインストールや基本操作まで、新人教育を担当していたディレクターの方が初心者に必要なポイントを丁寧に分かりやすく解説しています。新人教育を担当する人の目で読んでも参考になると思います。 2章はGitの実践編。フロン
クライアントに伝わりやすいように工夫されたワイヤーフレーム用のUI素材 -CRowe
クライアントにワイヤーフレームを見せる時に僕が一番気にかけていたことは、まずこれは最終的なデザインではないこと、そして内容がうまく伝わることです。 まぁ、デザインじゃないのはそのままなのですぐに理解してもらえますが、内容やアイデアをしっかり伝えきるのは難しいですよね。 Wireframe & UI Kit 自分だけやウェブ制作者間でのやり取りであれば、ワイヤーフレームはシンプルなボックスベースのものでも問題ないかもしれませんが、クライアントにはある程度ビジュアルを備えたものでアプローチするというのがこの素材のコンセプトです。 正確に理解してもらえることで、結果的にプロジェクトの進行にも役立つでしょう。 素材のコンセプト ワイヤーフレームの素材はさまざまなUIエレメントが揃っており、フォーマットは.epsでダウンロードできます。 利用にあたっては個人でも商用でも無料とのことです、詳しくはダウ
商用利用無料、64種類のさまざまな紙が揃ったプロ仕様の高品質なテクスチャ素材
個人でも商用でも無料で利用できる、ざらっとした紙、つるっとした紙、もわっとした紙など、さまざまな紙が揃ったテクスチャ素材を紹介します。 紙系のテクスチャ好きの人には、嬉しい素材ですね。 Free Paper Texture Pack ダウンロードできる素材のフォーマットは.jpgで、サイズは2,100x1,500pxの高解像度のテクスチャ素材です。 紙は全部で64種類！ その中からいくつかジャンルごとに紹介します。
[JS]レスポンシブにしっかり対応！高さの異なるパネルを揃えたり、成り行きにするスクリプト -EqualHeight.js
divなどで配置したパネル内の要素の量が異なっていても、全てのパネルの高さを揃えるjQueryのプラグインを紹介します。 高さを揃える系としては後発のスクリプトですが、レスポンシブにしっかり対応しているのがポイントです。 一列のパネルはもちろん、段組でもOK、省スペースのスマフォ用に成り行きもコントロールできます。
Photoshopで角丸矩形の四つの角丸を個別に編集できるようにする機能拡張 -Rounded Rectangle Radius Resizer
Photoshopで角丸矩形を作成する時、シェイプツールをよく使用すると思いますが、その角丸の矩形の四つの角丸を個別に数値で編集することができる機能拡張（スクリプト）を紹介します。 対応は、CS5, 6みたいです。CS6のWin, Macの日本語環境で動作しました。 Rounded Rectangle Radius Resizer Rounded Rectangle Radius Resizerのインストール Rounded Rectangle Radius Resizerの使い方 Rounded Rectangle Radius Resizerのインストール インストールは簡単です。 ダウンロードして解凍した「Rounded_Rectangle_Radius_Resizer.jsx」を、Photoshopフォルダ内の「/Presets/Scripts/」内に移動します。 Photosho
Coveloping
box-shadowでふわりとした影をつくるCSSのジェネレーター、レスポンシブのチェック、アスペクト比の計算機、CSS/JSの軽量化など、たくさんの便利な時短ツールがありますが、それらの便利なツールを一つの場所にまとめたCovelopingを紹介します。 FacebookのOPGチェックやGoogle Mapsの地図生成ツールもあり、新しいプロジェクトを始める時にも役立つものが揃っています。 Coveloping 便利ツールは現在23種類、アスペクト比の計算や一つのカラーに黒と白を加えたバリエーションを生成したり、box-shadowでふわりとした影をつけたり、jQueryのアニメーションのエフェクトなどがあります。 これからもどんどん増えていくそうです。 その中から、いくつか紹介します。
背景固定で美しいブラーがかかった半透明のパネルだけがスクロールするスタイルシート | コリス
レスポンシブ対応で背景画像は固定表示、美しいブラーがかかった半透明のパネルだけがスクロールするコンテンツを実装するスタイルシートを紹介します。 最低限の要素にしたデモ 実装は、こんな感じになります。 HTML パネルはarticle要素で実装します。中身はテキストでも画像でもフォームでも何でもOK。 <body> <article> <h1>半透明の美しいパネル</h1> <p>洋酒といえば、誰でも最初に思い浮かべるのがウイスキー。いわば洋酒のシンボル的な存在なのだが、英語表記が［一般に〔米〕では Whiskey,〔英〕では Whisky.］であることはあまり知られていない。米英両国では、このスペルの差で自国産と輸入品を区別しているという。わが和製ウイスキーの“Whisky”という英国式表示は、手本にしたスコッチのフォルムに倣ったものであり、それ以上の意味はないようだ。カナ表記にしても、ご
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
商用利用無料、桜のイラストやパターンのフリー素材のまとめ
デザインに使える！無料でダウンロードできる高品質なかわいい手書きのフリーフォントのまとめ | コリス
同人誌や商用利用もOK！マーブル模様が美しい高解像度のテクスチャ素材 -Marble Paper Textures
