源ノ明朝の派生フォントで、「破壊されて限界ギリギリ読める」仕上がりとなっているというフリーフォント「源界明朝」が公開されました。無料でダウンロードでき、個人利用・商用利用が可能となっています。 源界明朝は限界ギリギリ読める源ノ明朝の派生フリーフォント – デザインのブログ http://www.flopdesign.com/blog/font/5146/ ダウンロードするには上記のページにアクセスして「源界明朝をダウンロードする」をクリック。 フリーソフトの「Explzh」などを使って、ZIPファイルを解凍します。 解凍が完了しフォルダを開いたら「genkai-mincho.ttf」というファイルを右クリックして「インストール」を選択すればOKです。 源界明朝の使用例は以下のような感じ。 ペンキで描いた文字が風化して剥がれかけてきたかのようなザラッとしたデザインです。 源界明朝はフリーフォ

2021年12月18日 CSS, ダウンロード FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており、Flexboxを使ったレイアウト組みが今後のWebデザインのスタンダードとなるでしょう。Webクリエイターボックスでは以前からFlexboxの使い方について紹介してきたのですが、最近Flexboxが浸透してきたこともあってか各プロパティの使い方について質問される機会が増えてきたので、チートシートとしてまとめてみました。この記事ではなるべく画像メインでプロパティーの使い方を紹介したいと思います！ ↑私が10年以上利用している会計ソフト！ 動画で学ぶCSS Flexbox この記事はYouTube動画でも解説しています。動画派の

人気の秘密を探る この記事では人気のウェブメディアがどのような戦略・デザインでユーザーを集めているのかを分析します。対象は月間PV数が300万PV以上のメディア。それほどに読まれる仕掛けはどこにあるのでしょうか。

いくらコンテンツが良くても、見やすいサイトでないとユーザーはすぐに離脱してしまうでしょう。「見やすい」というのは、コンテキストやユーザーに依存する部分も多いのですが、そこには最低限守るべきルールがいくつかあります。 この記事では、見やすいサイトを作るときに最低限チェックしておきたい項目をご紹介します。 フォントサイズ フォントサイズや行間などは文章の視認性を大きく左右します。 WCAG 2.0では英語などの場合は18ptまたは14ptの太字、日本語の場合はそれと同等の文字サイズが望ましいとされています。1pxは0.75ptと同等とされているので、18ptは24pxとほぼ同等です。さらに、行の高さ（line-height）は150%〜200%、段落の間隔は行送りの1.5倍以上が推奨されています。 ＊18ptは1.5emと同等、14ptは1.2emと同等 そのほか、Googleも読みやすいフォ

こんにちは、デザイナーのトミーです。 技術の進歩とともに表現が変わるWebデザイン。トレンドの移り変わりも早くなってきましたね。 そこで、今回は2016年のWebデザイントレンドを探ってみようと思います。なぜ流行ったのかを考えることで、新しい表現にも挑戦していきたいところ。 後編はデザイナー藤田さんがまとめてくれますよ。それでは前編・後編でサクッと2016年のトレンドを振り返ってみましょ。 2016年のWebデザイントレンド（前編） 1.高解像度 参考サイト：pixelmator HD,svg,Retina対応など、高解像度モニターへの対応も増えてきました。通信速度の向上やベクターデータのブラウザ対応など技術の進歩に合わせ、「できるだけ綺麗に表示したい」といったところでしょうか。Macのretinaモニターなどターゲットに合わせて必須になる項目です。� 2.ドラッグを用いたUI 参考サイト

世界の変化は、とても早い。中国はあっという間に日本のGDPを抜かしてしまったし、ついこの間決まったような東京オリンピックもあと4年で始まってしまう。 そしてウェブデザインに関しても、例外ではない。ぼくはウェブデザインの勉強をして12年になるけれど、昔はTABLEレイアウトという、今考えると全くイケていない方法でデザインが行われていた。けれども今は、さまざまなテクノロジーの登場で、イケてるサイトを素早く作ることができるようになった。 今回は、ぼくがウェブデザインをするときに参考にしているトレンドを、イケてるウェブサイトとともにまとめてみようと思う。古風であまりオシャレでないウェブサイトは、完全に除いている。 1. ストーリーテリング UX(ユーザーエクスペリエンス)を最大化する、ということはウェブ業界では久しく言われてきたことだ。単にクールなだけでなく、ブラウジングする際に読み手にどんな体験

Webサイトがレスポンシブ対応していたり、常に表示する必要のないメニューはハンバーガーメニューで隠したりと、業界で共有されている*Webデザインの「あるべき姿」*は、常に少しずつ進化しています。 その下支えになっているのがブラウザ技術です。Webrageの調査によれば、Internet Explorerを超えてGoogle Chromeが国内外で圧倒的シェアを獲得していますが、Google Chromeは6週間ごとに安定版がリリースされており、アップデートごとにブラウザの技術も進化しています。結果的に、Webデザインでできる幅も広がるのです。 しかし、Webデザインでできることが多くなったからといって、必ずしもデザイン上のテクニックがユーザー体験(UX)を向上させるとは限りません。 そこで今回は、Webデザインが進化したからこそ「やってはいけない」5つのことをまとめました。よかれと思って実

Webデザイナーを対象に、Google Apps Script（以下、GAS）の基本的な使い方から実践的なWebサービスの開発方法までを解説する本連載。今回はGoogleフォームを使って、オンラインショップの商品紹介ページを自動生成するシステムを作ります。 商品紹介ページの作成 前回はGoogleフォームから投稿したデータを基に、Googleサイトでページを作成する簡易的なCMSを構築しました。この2つを連動する手法は、ほかにもいろいろ応用できます。今回は一例として、ネットショップなどで掲載する「商品紹介ページ」を自動生成するシステムを作ってみましょう。 商品紹介には商品写真が必須なので、前回作成したインフォメーションページとは異なり、画像を掲載する必要があります。Googleフォームにはイメージをアップロードする機能がないので、画像共有サービスの「Flickr」にアップロードしておいた画

目次 本記事では、Bootstrapの基礎をおさえた上で、よく使う、グリッドシステム、テーブル、ボタン、フォームの具体的な使い方を順番に紹介します。 Bootstrapとは Bootstrapを使う準備 グリッドシステムの使い方 テーブルの使い方 ボタンの使い方 フォームの使い方 Bootstrapとは BootstrapはTwitter社が開発したCSSの「フレームワーク」です。通常CSSを書く場合、全てのスタイルを自分で作っていく必要がありますが、このフレームワークにはよく使われるスタイルがあらかじめ定義してあるので、ルールに沿って利用するだけで整ったデザインのページを作成できます。 もともとTwitter社内で作られたもので、以前は「Twitter Bootstrap」と呼ばれていましたが、現在では「Bootstrap」のみで呼ばれるようになっています。 Bootstrapを使うメリ

こんにちは、ディレクターのもときです。 ディレクターによる連載「いいWebつくろう〜クライアントと制作会社〜」の第6回目のテーマは、ペルソナとターゲットの違い、ペルソナの設定方法についてのお話です。 みなさんはWebサイトやサービスをつくる時に、その目的やコンセプトはもちろんですが、それらを誰に対してつくるのかをきちんと意識していますか？　そこを意識せず、万人向けを狙ったものはコンセプトや伝えたいメッセージが薄れ、失敗してしまうことがあります。 失敗しないためにおすすめするやり方が、ターゲットとペルソナの設定です。今回はターゲットとペルソナを設定するメリットとその設定方法、「ターゲットとペルソナの違いってなんなの？」というところからお話できればと思います。 ターゲットについて ターゲット（標的）とは、サービスを利用するであろうユーザーを指し、年代、男女、既婚未婚、職業、年収などのスペックで

Site will be available soon. Thank you for your patience!

バナーデザインは決められた領域内でどれだけユーザーやターゲットの目にとまるようなデザインにできるかが重要になってきます。 デザイン制作したことあるなら一度は経験したことあると思いますが、領域が決められているけどその中でしっかり伝えたい内容を目立たせる必要があるので、何度もレイアウトを調整したり、結局時間をかけて完成してもいまいちな出来になってしまったりなんてことも...。 そこで今回は、バナーデザインをするにあたって覚えておきたいレイアウトやデザインパターンをはじめ、効率良く制作していくことができる制作フロー、特に新米デザイナーさんなどには非常に参考になると思うので是非目を通して欲しいエントリー、インスピレーションをもらえるバナー関連のデザインギャラリーといった、バナーデザインの制作に関連することをまとめてみました。 バナーデザインの制作フロー 後ほど紹介するエントリーでこのような内容に関

こんにちは、デザイナーの佐藤タカアキ（@sato_tkaaki）です。 先日、WACULの佐藤昭博さん／榎本 順彦さん、AID-DCCの有吉学さんとともに「HELLO!WEB!TOKYO vol.02」を開催しましたので、そのイベントレポートを書かせていただきます。 「HELLO!WEB!TOKYO」とは？ HELLO!WEB!TOKYOとは、Webデザインに関わるすべての人を対象とした、情報交換や出会いの場所をつくりデザインを追求していくコミュニティです。同志が集まることによって、モチベーションが上がったり、現役のデザイナー仲間を増やすことを目的にイベントを主催しています。今後も勉強会やワークショップを2ヶ月に1回のペースで開催する予定です。 2回目の開催となった今回は、「ゼロから始めるWebデザイン」をテーマにLT＆パネルディスカッションを行い、親睦会では現役のデザイナーと様々な情報交

数多くのブログで2016年のトレンドをさまざまな切り口でポストしているので、その中から特に印象的で共感がもてたものをまとめて紹介します。 注目キーワードは、UI/UXはユーザーありきを忘れずに、洗練されたUIパターンとコンポーネント、旧バージョンIEのサポート終了、静的ページのジェネレーター、ページの肥大化。 淡いピンクとブルーは、今年のトレンドカラーのローズ クォーツとセレニティ 参考: 2016年のトレンドカラーはやさしい色、春の10色も素敵なカラーが揃ってる！ 2016年、Webとグラフィックデザインのトレンドと今後の展望 2016年、Web制作業界全体の流れ 2016年、注目されている新しいテクニック・コンセプト 2015年に定義されたレスポンシブWebデザインの8つのトレンド 現在のトレンドから見た良いこと、良くないこと、そしてダメなこと 2016年に学ぶべきプログラミング言語と

※こちらの記事は2015年版です。LIGブログの2018年版 最新の表記ルールはこちらの記事へどうぞ。→まだ「文字校正」で消耗してるの？ LIGブログの表記ルールについて整理してみた こんにちは、エディターのエリー（@__erI_）です。 およそ100人。それが現在のLIGの社員数です。 そして、LIG社員には毎月1本のブログ記事を書くという使命があります。これはもう大波乱だ！ということで、LIGブログの表記ルールをここにまとめます。 社員のみんなに、届け！ LIGブログの表記ルールは日本語表記ルールブックや記者ハンドブック、先人たちの教えなどによって作られてきました。 WebライターやWebメディア関係者のみなさんにとっても、表記ルールの一例として何かしら参考になれば幸いです。 ひらがな表記にする漢字一覧 以前、「ハフィントンポスト」の「ちょっとひらがなに直すだけで、文章はこんなにプロっ

こんにちは、デザイナーのまきこです。 iPhone6のディスプレイがバキバキに割れてしまってから、心を無にしてずっと使っていましたが、iPhone6sの発売により、最近はちょっとウキウキしています。 ところで、デザイナーのみなさんは、普段作業をしているときに「このままのデザインだと、なんかさみしい�」「もっとにぎやかにしたい」と思ったことはありませんか？ そんなときは、制作物に応じた「にぎやかし」をするのがもちろん良いのですが、いろいろ難しく考えるよりも、手を動かしてみたほうが早い、ということもありますよね。ということで今回は、デザインが「なんかさみしい」と思ったときに、だいたい3分あれば試せるデザインアイデアを7つご紹介します！ ▼ デザインアイデアに詰まったときはこちらもどうぞ。

2015年10月8日の記事を再編集しています。 近年のWeb業界は目覚ましい発展を遂げており、以前に比べるとWebデザイナーを本格的に目指す方向けのスクールやサービスも数多く登場し、独学でもWebデザインが学びやすい環境になりました。 とはいえ、未知の領域へのチャレンジは「何から始めたらいいのか分からない」そんな不安で尻込みしてしまうことはないでしょうか。 今回は、未経験者がWebデザインを学んていく過程や成果を記録した記事をご紹介し、Webデザインを始めたい方、興味があるという方の後押しになればと思っています。 ぜひ、これからの参考にしてみましょう。 未経験者がWebデザインを学んだ成果を記録した記事まとめ 1.１年でフリーのWebデザイナーになった僕が実行した8つのステップ【独学デザイン勉強方法】｜ Literally http://tsukuruiroiro.hatenablog.c

これまでに数多くの一部上場企業様のWebサイトのリニューアル・サイト制作にコアメンバーとして参加し、その中で表記ルールもかなりの数を策定してきました。策定時のベースに使用する「ひらく漢字」「ひらかない漢字」の一部を紹介します。 ※以前、公開した記事を再編集したものです。 表記ルール: ひらくことが多い漢字 表記ルール: ひらくことを検討する漢字 表記ルールの策定にあたり 表記ルール: ひらくことが多い漢字 ひら（がなで書）くことが多い漢字。 ※「正・誤」は使用する際の基準であり、日本語としての「正・誤」ではありません。 読み 正 誤

Photo by Matthew Pearce 今回のpaiza開発日誌は片山がお送りします。 皆さんはWebデザイナーがどんな仕事をする人か？という事を明確にイメージ出来るでしょうか？ 最近、弊社でWeb/UIデザイナーを採用する事になったのですが、求人の要件を固めていくにあたって、そもそもWebデザイナーって、どんな経験を持った人を指すんだっけ？というのが曖昧だったので、Webデザイナーのキャリアパスと、15分野のスキル一覧を書き出してみました。 現在20代のWebデザイナーだという方が、今後のキャリアを考える際にもちょうど参考になりそうな物になったので、せっかくなので公開してみようと思います。Webデザイナーからどのような職種にキャリアアップ出来るのかと言う事と、そのために必要な経験を15分野にまとめてみました。 企業がWebデザイナーを採用する際の求人要件定義にも使えるかと思います