文:神乃木リュウイチWebサイトや印刷物制作にとっても便利なアイコンフォントとその使い方Twitter19FacebookGoogle+はてブ1PocketWebサイトや印刷物を作っていると、「ここ、文字が多いしアイコンとか入れたいな......」と思うことが結構あります。そんなとき、自分でアイコンを作っていては時間がいくらあっても足りませんよね。いうわけで今回は、Webサイトや印刷物で簡単に使える、便利なアイコン素材をご紹介します。Webフォント形式で使えるフリーのアイコンセットです。アイコンの数は600個以上あり(v4.7.0現在)、WebサイトでもPhotoshopでも簡単に使えるため、殆どのシーンで困ることがありません。当サイトでも使用していますが、現状で一番オススメできるフォントセットと言っても過言ではないでしょう。Awesomeのアイコンです。AwesomeはWebフォント形式であるため、サイト等でCSSファイルを読み込んだ上でクラスを指定します。アイコンを使いたいページのhtmlファイルのヘッダに、以下の行を追加します。等のタグ(iタグ推奨)で、クラスを指定することで利用します。表示されるアイコンはフォントなので、色を変えたり、背景色をつけたりすることもできます。ボタンやUIパーツにも応用できますね。指定すべきクラスはIconsのページにあるので、好きなものを探してみましょう。Awesomeをフォントとしてインストールする必要があります。Awesome」をクリックし、ZIPファイルをダウンロードします。システムにインストールします。Awesome」がインストールされていれば完了です。ページにあるアイコン集をコピーし、テキストに貼り付けてみます。Awesomeに指定してあげると、Photoshop上で使えることがわかります。AwesomeはWebサイトのデザイン時・コーディング時の両方で同じアイコンを使えるため、ページの制作時間を大幅に減らすことができ、種類がたくさんあって便利なことから、世界中で利用されるアイコンセットになったのです。Web制作をやっていると、デザイナーさんがフォントがないアイコンを何十個もPSDに入れていたりすると、コーディングしている側は結構殺意を抱き手間がかかるので大変だったりします。Fontは、現在バージョン3になるアイコンフォントセットです。Awesomeよりは少ないものの、実用的なアイコンが揃っているので困ることは少ないでしょう。Awesomeは便利なアイコンフォントですが、それゆえにあちこちで使われすぎているため、デザインにオリジナリティを出したい時に困る場合も少なくありません。Fontなどの他のフォントセットを選択肢に含めておけば、他のサイトとはちょっとテイストの違うデザインが作れるということですね。Awesomeと同じで、以下をヘッダーに挿入します。いった具合に指定してやると、アイコン(この場合は家のマーク)が表示されるようになります。ファイルをインストールします。アイコンをクリックするとクリップボードにコピーされるので、それをPhotoshop上に貼り付けましょう。Awesomeに比べると少し角張ったものが多いです。テクニカルな情報を扱うサイトや、近代的な雰囲気を出したいサイトでは、こちらのほうがマッチするかもしれませんね。Setは、上の2つとは少しテイストの異なる、一筆書き風のアイコンフォントのセットです。アイコンの数も200個程度とそれなりに揃っているため、デザインの中に組み込んでも足りなくなることは少ないでしょう。モノトーンなデザインを作るときに重宝するかもしれませんね。Setは配布しているメジャーなCDNが無いので、手動でファイルをダウンロードする必要があります。Setをクリックし、ダウンロードサイトからzipファイルをダウンロードします。フォルダを、作っているHTMLファイルからアクセスできる任意の場所に置きます。HTMLファイルのヘッダーに下記の行を追加します。いったクラスを指定すると、アイコン(この場合は家のマーク)が表示されます。システムにインストールします。Codes」にチェックを入れるとアイコンの下にコピー可能なフォントが現れるので、それをコピー&ペーストして使用します。Setと、3つのアイコンフォントとその使い方を紹介しました。これ以外にもアイコンフォントはたくさん配布されているため、こういった資源を有効活用することで、制作しているWebサイトや印刷物等に彩りを加えることができます。アイコンがあることで利用者側も操作・機能がわかりやすいというメリットもあります。本サイトの編集長でもあります。東方Projectを入り口に同人文化にハマり、2008年からサークルとして活動しています。活動は音楽制作とWeb制作の二本立てで、最近では他のサークルさんのWebサイト制作などに多く携わっています。しろたんは2匹(公称値)保有しています。年間数万円しますが、納めないと仕事になりませんからね。そんなAdobe税に衝撃の展開が訪れたのは今年の4月のこと。白銀GIFアニメの代わりにCSS3のstepプロパティを使ってみよう!「Webサイト上でアニメーションを表示させる」といえば、筆頭に上がるのはアニメーションGIFで、少し前になるとFlashなども多くありました。神乃木リュウイチ同人サークルにオススメの名刺印刷会社選び〜サンプルを取り寄せてみたよ同人イベントなどで初対面の人に挨拶をすると、まず渡されるのが「名刺」でしょう。NOTESは、2015年冬のコミックマーケット(C88)で「蒼碧の翼」という艦これアレンジCDをリリースしました。このCDは、CDにも関わらずDVDスタイルのジャケットを採用しています。神乃木リュウイチ絵が描けなくてもできる、写真を背景イラストのように加工する方法(教室編)私は、まったくもって絵が描けません。人物画はもちろんのこと、背景画もとてもお粗末なものです。フチヤモリ「ヤモリの出荷先」読者アンケート結果発表!次はどこへ行けばいい?どうも。サークル内で最も人間扱いされないヤモリです。先日の記事末のアレに届いたユーザーの皆さまからの無茶ぶりご要望がなかなか楽しい数になってきたので、神乃木氏とねこむろ氏と開封していきたいと思います。神乃木リュウイチ絵が描けなくてもできる、写真を背景イラストのように加工する方法(風景編)こんにちは、神乃木です。前回書いた記事では、若干日が傾いた教室の写真から、夕日の差し込む教室のイラストのようなものを作る方法について解説してみました。神乃木リュウイチ思わず真似したくなる、デザインや動きが美しいアニメの特設サイト8選ボリュームのある本、ゲームなどをイベントやオンラインで配布するときには、Webサイトも凝ったデザイン・凝った動きにしてみたいものです。NOTESの餌こと、銀杏と申します。艦これアレンジCDTwitter・RSSフィードTwiter、RSSで最新記事の情報をお届けしています。Proを購入してみた。