商用利用OK！2015年にリリースされた無料フォント35
2015年12月16日 フォント 2015年も残り二週間！今年も数多くの素敵フォントがリリースされました！この一年を振り返って、「これは！」と思ったフォントをいくつか紹介します。どれも無料でダウンロードでき、商用利用可能なものです。みなさんのお気に入りが見つかると幸いです。 ↑私が10年以上利用している会計ソフト！ 日本語フォント はれのそら明朝 かしこまりがちな明朝体に丸っこさをプラスしてスッキリ美しく仕上がったフォント。縦書きでもきれいです。 JKゴシックL 丸っこくてこじんまりとした可愛らしいフォント。少し太くなった「JKゴシックM」もあります。ちなみにフォント製作者は女子高生ではないようです。 機械彫刻用標準書体フォント 工業的な彫刻によって文字を作成するときの標準としてJISに定められたフォント。サイトではフォントの設計について詳しく紹介されています。 コーポレート・ロゴ 企業や
10歳のこどもから学んだユーザビリティ向上のポイント
2015年9月8日 ユーザビリティ 夏休みの後半、原稿用紙15枚の自由研究に苦しめられていた姪っ子（10歳）を「楽しそうだな〜」と手伝っていました。そんな時「私も久しぶりに自由研究したい！」と思い、ちびっこが家にいることですし、最近のちびっこがWebサイトをどのように利用しているのか研究してみることにしました。という事で今回の記事は自由研究風に進めようと思います！ ↑私が10年以上利用している会計ソフト！ 調べたいこと 認知度の高いWebサイトを、小学生がどのように利用するのかを観察し、こども向けのWebサイトに必要なもの、Webサイトを制作するうえで注意すべき点を調べます。 予想 難しい漢字は読めないので読みとばす イラストやキャラクターなど、可愛いものに興味を示す 明るい色彩のサイトに興味を示す まだ習っていない漢字や難しい表現は読み飛ばし、自分の理解できるもののみにフォーカスしていく
料金表をわかりやすくデザインするコツ。実例やレスポンシブ対応サンプルも！
2017年10月31日 CSS, Webデザイン, Wordpress サービスを提供しているWebサイトにとって大切なのが、各プラン内容とその料金。複数の選択肢がある場合、その違いがわかりにくかったら、ユーザーを困惑させてしまいます。今回はWebサービスのコンバージョンにも繋がる、わかりやすい料金表の作り方を考えてみたいと思います。 ↑私が10年以上利用している会計ソフト！ 料金表をデザインするときのポイント 1. プランの違いをわかりやすく まずは各プランのサービス内容と料金をわけることから始めましょう。各プランの名前を料金表の先頭において、ひと目でどのプランについてまとめているのかを認識できるようにします。プランをグレードアップするごとにプランの名前もランクが上がるよう命名しましょう。 よくあるプラン名： ブロンズ・シルバー・ゴールド・プラチナ マイクロ・スモール・ミディアム・ラージ
Webクリエイターボックスを（プチ）リニューアルしました
2014年8月19日 お知らせ 約2年半ぶりにWebクリエイターボックスのテーマをリニューアル！という事で、変更点をザックリと紹介します。とは言え全体のデザイン自体はあまり変わっておらず、細かいところや内部の修正・更新がメインとなっています。ちなみにブラウザーはChrome, Safari, Firefoxの最新版、IE11対応。Webクリエイターボックスに訪問するユーザーで、IE10以下を利用の割合は1.5%をきっていたのでバッサリ捨ててます。古いブラウザーを利用の方はアップデートしましょう ;) ↑私が10年以上利用している会計ソフト！ SVG画像 背景やアイコンなどで使うデザインパーツの画像をSVGに変更しました。レティナディスプレイのMacに変えてからというもの、どうも画像のギザギザが目についてしまって。リデザイン前のテーマでも一部SVGを使っていましたが、今回総入れ替えしました。
Adobe製品の代わりに使える無料アプリ10+
2014年6月27日 Illustrator, Photoshop, 便利ツール PhotoshopやIllustratorなど、Adobeの製品はクリエイターの必需品のひとつとなっています。しかしその値段からなかなか手が出せない…という方も多いのではないでしょうか？今回はAdobe製品の代用として使える無料アプリをいくつか紹介します。金欠の学生さんや、様々な理由から脱Adobeを考えている方の参考になれば幸いです！ ↑私が10年以上利用している会計ソフト！ Photoshopの代わりに GIMP 長年Photoshopの代用として愛され続けているGIMP。Photoshopの拡張子であるpsdファイルが開けることはもちろん、Photoshop用のブラシなども利用可能。画像の編集・加工ツールとしてPhotoshopとほぼ同様の機能を備えています。日本語の公式チュートリアルも充実！私もお金の
カテゴリー別配色アイデア100
2017年6月30日 色彩 配色によってそのデザインの印象は大きく変わると思います。色は大切な要素のひとつですね！ということで、色の持つ印象別に配色アイデアをずらりと並べてみます。配色はおなじみ（？）のCOLOURloversから、「これは！」と思うものを選ばせて頂きました。素敵な配色がいっぱいのこのサイト、ぜひ覗いてみてください！また、今回紹介するのはあくまで一例ですので、自分なりにアレンジしてみるのも楽しいと思います。サイトの雰囲気にあう配色を探してみてください。 ↑私が10年以上利用している会計ソフト！ 配色に関するおすすめサイト COLOURlovers 色をテーマにしたコミュニティサイト、COLOURlovers。自分の考えた配色を登録したり、お気に入りの配色を保存しておくことができます。今回はこちらから配色アイデアを選びました。iPhoneアプリは「ColorSchemer」と
かわいい系デザインに使えるフォントや素材、デザインアイデアを集めました
2019年6月4日 Webデザイン, ダウンロード, フォント 女性Webデザイナーにとっては「かわいいと言えばこんな感じ！」という基本的な概念が自然と身についているものの、男性デザイナーにとってはなかなか難しい女性テイストのデザイン。でも大丈夫！今回紹介する無料素材やフォント・配色例を組み合わせれば、きっと女子力の高いかわいいデザインができあがるはずです！紹介する素材はすべて商用利用OK！参考になるデザインのWebサイトもいくつか紹介します！（あ、ちなみによく誤解されますが、私、Webクリエイターボックスの中の人は女ですw） ↑私が10年以上利用している会計ソフト！ 目次 無料フォント 無料アイコン・イラスト素材 無料の背景パターン素材 「かわいい」を実現する配色例 かわいい系デザインのWebサイト実例 無料フォント 曲線をうまく使うと女性らしいデザインに仕上がります。そこで、使用するフ
見落としがちなHTML5で変更された要素いろいろ
2013年3月23日 HTML, Webサイト制作 HTML5を勉強していて、section, nav, header, footerなどの新しく追加された要素について説明している記事はよく見かけるのですが、HTML5で変更された要素について触れている記事が少ないように感じたので、よく使うものを中心にちょっとまとめてみます。既存のWebサイトをHTML5化する時は、コンテンツ内に変更された・または廃止された要素がないか確認することも大切ですね！ ↑私が10年以上利用している会計ソフト！ HTML5の基本はここからお勉強！ 「ところでHTML5ってなに？」という方は、まずは以下の記事を読んでみてください。このようにHTML5の基本について解説している記事はたくさんあるので、詳しい説明は今回は端折らせて頂きます。変更点のみに焦点を当てますよ！ Webの3つの問題を解決する「HTML5」とは何な
Useful CSS Text Effects
2014年8月22日 CSS モバイルファーストの概念が広まり、コンテンツ主体の「読ませる」サイトが増えてきた昨今。テキスト周りをより便利に、より素敵に表示できるようなCSSをいくつか集めました。ユーザビリティの向上も図れるようなものもあるので要チェック！基本的なテクニックが中心なので、初心者さん〜中級者さんの参考になればと思います。 ↑私が10年以上利用している会計ソフト！ テキスト周りで使えるCSSの小技 目次 テキストを選択する時の色を変更 蛍光ペンで線を引いたような効果 長いテキストを「…」で省略する 番号リストの表現を変更 リンクの種類でアイコン変える 言語によってスタイルを変更 テキストリンクのエフェクト プリント時はURLを表示 長いURLを途中で折返す 途中で折り返さず、次の行に 先頭の文字を大きく 先頭を一文字分あける グラデーションテキスト ブラウザーは特記していなけれ
6 Options for Low Budget Web Design / Development Projects
2014年7月23日 Webサイト制作, フリーランス Webサイト制作の依頼を受ける上で、クライアントの中には相場が分からず、必要最低額を遥かに下回る予算を提示する方もいます。多くの場合は必要な作業内容やかかる時間を説明すれば納得して頂けますが、時々「タダでできて当たり前」を前提とする方もいます…。うむむ。タダ…はちょっと行き過ぎですが、なるべく低予算のクライアントにも満足してもらいたいですよね。予算にあわせてできることがないか、考えてみました。 ↑私が10年以上利用している会計ソフト！ 1. 実装する機能を絞る 「必ず取り入れたい機能」「できれば取り入れたい機能」「取り入れられたら嬉しい機能」と、要望の優先順位を話し合い、予算に応じてできないものは思い切って削除したり、違う方法を考えて予算内に収まるように検討します。「時間 vs お金 vs クオリティ」でも書いたように、取り入れたい要
Basic Logo Design Process
2013年3月25日 Webデザイン 企業のイメージを明確にすることを「ブランディング」と呼びます。企業ロゴはそのブランディングが色濃く反映され、企業のイメージを左右する重要な部分です。今回は「ロゴとはなんぞや？」というところから、私のロゴを実例に、ロゴの制作手順を紹介しようと思います。 ↑私が10年以上利用している会計ソフト！ 先日「ロゴデザインする時の参考に！ロゴデザインギャラリーのオンパレードと注目記事色々！」という記事内で、なるほどな、と頷ける文章に出会いました。 WEBサイトは、エンドユーザーに伝わらないデザインだとわかればリニューアルするけど、ロゴデザインはエンドユーザーに伝わらないからと言って作り変えることは殆ど無い。それはつまり、ロゴはお客様の為に作るんじゃないと、ロゴは自分たちの意思や考えの象徴でもあるからそんなに簡単に変えるわけにはいかない、自分たち（ロゴに込められた物
少しのコードで実装可能な20のCSS小技集
2019年5月17日 CSS CSSハックに続き、このCSS小技集も私のブックマークにずらりと並んでいたので、整理も兼ねて記事にしてみました。CSSのお勉強を始めたばかりの頃にブックマークしておいたものも多数。。ということで初心者さんからベテランさんまで参考にしてみてください！ ↑私が10年以上利用している会計ソフト！ コードはサンプル内の「HTML」や「CSS」タブをクリックしてくださいね！ 少しのコードで実装可能なCSS小技集 シリーズ 【第2弾】少しのコードで実装可能な20のCSS小技集 【第3弾】少しのコードで実装可能な15のCSS小技集 まずはCSS基礎編 1. divを中央揃えにする ほとんどのサイトが基準となるdivを画面の中央揃えに設定しています。左右のmarginをautoにして中央揃えに。 See the Pen Center Div by Mana (@manabox
Free “Coming Soon” Page Template with Countdown Timer
2013年3月25日 ダウンロード ページを開くと、無機質な「メンテナンス中」の表示。誰もが一度は見たことがあると思います。文章のみが表示されると、なんだか寂しいですよね。だからと言ってメンテナンスページを作るのに時間をかけたくない…。そんな方のために、カウントダウンタイマー付きの「準備中ページ」テンプレートをご用意しました！ご自由にお使いくださいませませ。 ↑私が10年以上利用している会計ソフト！ ダウンロード デモ 仕様 無料 商用サイトでの利用可 日付設定するとカウントダウン可能 Chrome、Safari、Firefox、iOS、IE7〜9、Operaで動作確認済 タイマーの設定 タイマー設定は index.html の <head></head>内にある $(function () { $('#countdown').countdown({until: new Date(2013
少しの手間で大きく変わる、細部にこだわったWebデザインを
2017年6月29日 Webデザイン 「デザインしてみたけどなんだか物足りない…」そんな経験ありませんか？私はよくあります。それで色を変えてみたり、形を変えてみたりと色々試してみるのですが、結局どれもしっくりこなかったり。そんな時は元のデザインにほんの少し手を加えるだけで納得のいくデザインに変わることが多いんです。わずかな装飾で大きく印象を変える。そんな「ひと手間」に注目してみましょう！ ↑私が10年以上利用している会計ソフト！ 追記：Photoshopを使った加工の仕方を記事にしてみました！ » 【実践編】少しの手間で大きく変わる、細部にこだわったWebデザインを グラデーションを加える 「デザインしてみたけどなんだか物足りない…」そんな時はわずかなグラデーションを加えるだけで立体感がでて、ノッペリしたデザインを一新することができます。アレコレ装飾するよりもシンプルかつ王道。 ヘッダーの
Web屋の私がブックマークしているサイト65 | Webクリエイターボックス
2017年7月14日 便利ツール 久しぶりに自分がブックマークしているサイトを整理してみました。昔から変わらず愛し続けているWebサービスやチュートリアルサイトなど多数あったので一挙にご紹介します！有名どころからあまり知られていないけど便利なサイトまで、多数あるので時間のある時にじっくり見てみてください！ ↑私が10年以上利用している会計ソフト！ ブックマークしているサイト 目次 Webサービス デザイン関連 画像関連 CSS jQuery WordPress フォント スマートフォン 配色関連 HTML5 メルマガ Webサービス 1. Sendoid Sendoidは会員登録不要のファイル送信サービス。ファイルをアップロード後にURLが生成されます。パスワード設定可。 2. HTMLエンコードフォーム HTMLエンコードフォームは特殊記号などをエンコード・デコードしてくれるWebサービ
「Webサイトにデザインなんて関係ねー」と言う人に一言。Webデザインの重要性とは？
2017年7月14日 Webデザイン マーケティング専門の人が「Webサイトにデザインなんて関係ないぜ！すべてはプロモーションとコンテンツ次第なんだぜ！」と豪語していたのでそれに反論を。もちろん彼の言っている事はWebサイトを世に広めるためにはとても大切な要素です。でもだからといってデザインが全く関係ないというのは極論すぎます。という事でWebデザインの重要性について考えてみたいと思います。 ↑私が10年以上利用している会計ソフト！ なぜWebデザインは重要なのか？ 以前「ECサイトの色やデザインと購買意欲の関係」という記事で触れたとおり、ECサイトにおける約半数のオンライン消費者が、全体のデザインを理由にそのサイトを再訪問しないようです。この結果から、多くのユーザーがWebサイト上のデザインを重要視している事がわかります。では具体的にWebデザインはどのような役割があるのでしょうか？ ユ
配色パターンからWebデザインを考える
2017年6月29日 Webデザイン, 色彩 ページを開いた瞬間にそのWebサイトのイメージを左右するほど重要な要素「色」。しかし色の組み合わせ、配色には無限のパターンがあり、正しい配色を見つけるのは簡単なことではありません。ここでは色彩の基礎と配色パターンの見つけ方の一例を紹介します。 ↑私が10年以上利用している会計ソフト！ まずは色彩の三属性について 色は彩度・明度・色相の三属性（三要素とも呼ぶ）から成り立っています。 彩度 色の鮮やかさの度合いを表します。彩度の高い色は派手・華やか・目立つ色といえます。子供服やキャラクターグッズ関連のサイトには彩度の高い色が使われることが多いです。逆に彩度の低い色は地味・おだやか・上品であるといえるでしょう。和食・ヴィンテージ風デザインのサイトには彩度の低い色がよく使われます。 明度 色の明るさの度合いを表します。明度が高い＝明るい色はさわやかで爽
少女のレモネードスタンドから学ぶ9つのマーケティング術
2013年3月23日 マーケティング フリーランスのコピーライター・マーケティングコンサルタントであるJim Lodico氏の記事が、昨年Web Designer Depotというブログに紹介されていました。あの記事面白かったなーと突然思い出したので、Walter氏の了承のもと意訳してみます。元記事は“9 Marketing Tips from a Six-Year Old’s Lemonade Stand”です！ ↑私が10年以上利用している会計ソフト！ ある日、うちの娘ソフィアがレモネードスタンドをしたいと言ってきました。 レモネードを売るために週末をつぶすのは本当に嫌だったので、レモネードミックスを買ったりカップを用意したりするのにどれほど費やさなければならないかを娘に説明しました。 努力もむなしく、娘の意思を曲げることはできませんでした。彼女はどうしてもそれをやりたかったようで、彼
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
