弊社のスタッフはフロントエンドの開発にとどまらず、デザインを制作する機会も少なくありません。弊社に限らず、近年職種を問わずデザインを扱う機会が増えているように思います。しかし、コンテンツ要素が整理整列されていなかったりテキストのカーニングがされていなかったりと、基礎的なことができていないようなケースも多く見られます。基礎的な部分が押さえられていないと、野暮ったさや素人感が出てしまいイマイチな仕上がりになってしまいます。 今回はそういった方に是非読んでもらいたい記事を、すぐにでも実践できる内容を中心にピックアップしました。Webサイトやアプリケーションのデザインだけでなく、企画書やプレゼンテーション資料の作成などでも応用できるものなので、どなたでも覚えておいて損はないと思います。 フォント選び フォントの基本的な選び方 | Arch ▲フォントの系統から書体、ウェイトの選定方法まで、ユーザー

デザインを語る上で重要な要素のひとつ、「フォント」。デザインを実際に手がける人だけでなく、それを見る多くの人にとってなじみ深いフォントとして、Windowsのプリインストールフォント「MS Pゴシック」は代表的なもののひとつかもしれません。 「MS Pゴシック」 「MS Pゴシック」は過去にマイナビニュースで実施した美大生の「お気に入りフォント」アンケートにも名前が挙がった実力派(?)ですが、実際に日々グラフィック/エディトリアルデザインを手がけているデザイナーの目には、この定番フォントはどう映るのでしょうか。 今回は、デザイン会社にてエディトリアルデザイン/Webのレイアウトデザインを手がけているSさんに、「MS Pゴシック」についての率直な思いを伺いました。 ――「MS Pゴシック」、デザイン業務で使うことはありますか? 私は主にエディトリアル(雑誌や書籍など)、グラフィック、Web領

更新日: 2017年9月26日公開日: 2015年6月10日プロ御用達！WEBデザインに役立つデザインツール13選 忙しい web デザイナーの方、web デザイン勉強中の方、CSS やプログラミングからチョット目を離してデザインツールを見直してみませんか？ 今までやっていた作業、可視化に時間のかかっていた作業を劇的に変えてくれるツールがたくさん存在します。チョット作業の手を止めて、以下のツールを覗いてみてください。きっとこれからのあなたの web デザインを快適にしてくれますよ！ WEBデザインに役立つデザインツール 13選プロ顔負けのデザインツール「webflow」 webflow 対応 / Mac、Windows 価格 / 無料 ～ $84 /月 表示言語 / English Free トライアル / 有 デザインには自信があるけれど、実はプログラミングはチョット苦手、という方にお勧

Bootstrapは人気のフレームワークですが、日本語のコンテンツを表示するために最適化されているとは言えません。フォント指定・文字サイズをはじめ、日本語をより美しく表示するためのさまざまなアプローチを取り入れたテーマ「Honoka」を紹介します。 単に使用するだけでなく、他のものでも日本語を美しく表示させるのに役立ちます。 Honoka Honoka -GitHub 日本語フォントは、たくさんのフリーフォントがあります。 2017年用、日本語のフリーフォント 259種類のまとめ Honokaの特徴 Honokaのデモ Honokaのアプローチ -Bootstrapでの日本語表示最適化 Honokaの利用方法 Honokaの特徴 Honokaは、Bootstrapでより美しく日本語を表示させることにこだわったオープンソースのテーマファイルで、これをベースにWebサイトを作成したり、既にBo

2017年5月25日 CSS FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。前々からあった技術ですが、ブラウザーによって書き方が違ったり、仕様がころころ変わったりと、イマイチ一歩踏み出せない感があったFlexbox。しかしようやくモダンブラウザーでの利用に難がなくなり、実務にも充分使えるようになりました。今回はそんなFlexboxの魅力と使いドコロを、デモ付きで紹介していこうと思います！ ↑私が10年以上利用している会計ソフト！ 対応ブラウザー Can I use…で紹介されているように、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari用に -webkit- のベンダープレフィックスが必要です。IEについては11から正式に対応。IE10にも対応していますが、書き方が

コーポレートサイトやスモールビジネスから、ランディングページ、プロダクトページ、ポートフォリオやギャラリーなど、BootstrapをベースにしたWebページが簡単に作成できる無料のテーマがダウンロードできるサイトを紹介します。 テーマとして利用するだけでなく、制作のインスピレーションにもいいですね。 Peter Finlan 縦長ページにかっこいいスクロールエフェクトやアニメーションを加えた今時のWebページが実装できます。デザインも非常にかっこいいものが揃っています。

久しぶりにWebサイトのfaviconを変えようと思い、調べてみると、必要なfaviconが大幅に増えていることがわかりました。 その数、何と21個！ そんなに増えていたとは。 一応、以下にリストアップしてみます。 faviconのリスト favicon.ico: IE用 favicon-16x16.png: タブ表示用 favicon-32x32.png: Mac版Safari用 favicon-96x96.png: Google TV用 favicon-160x160.png: Opera 12 までのスピード・ダイアル用 favicon-196x196.png: Android版Chrome用 mstile-70x70.png: Windows 8 用 mstile-144x144.png mstile-150x150.png mstile-310x310.png mstile-31

こんにちは！ 日本語のフリーフォント、なかなか良いのが見つからなかったり、どれがいいか迷ってしまうことってありますよね。 今回は、フォントで悩むデザイナーのために、人気の日本語フリーフォントを20個厳選してみました！ 新しいフォントから古いフォントまで様々なフォントがあるので、是非、チェックしてみてください。 1.はんなり明朝 フリーフォント界で有名な明朝体です。 不動の人気を誇っていますね。アクセス数も一番です。 →はんなり明朝 2.大甘書道体 テレビアニメ銀魂の次回予告タイトルに使われている、豪快な毛筆体です。 特に銀魂ファンには嬉しいフォントですよね！ →大甘書道体 3.あんずもじ 言わずと知れた手書きフォント。控えめな女の子が書いた文字っぽくて可愛くて人気がありますね。 →あんずもじ 4.うつくし明朝体 横書きの流れを意識して作られた明朝体フォント。 上品でリッチな雰囲気があります

主な手順 主な作成手順は、こんな感じです。 CSSをstyle.cssなどに貼り付ける CSSのclassを用いて文章を書く CSSさえ貼り付けてしまえば、あとは「吹き出しクラスを適用したpタグ」などで、書き込むだけです。それほど手間もかからないと思います。 作成方法 作成方法は以下です。 style.cssに貼り付ける 以下のCSSをstyle.cssにコピペします。 /******************************* * 左からの吹き出し ********************************/ .left_balloon { position: relative; background: #fff; border: 1px solid #777; margin: 10px; padding: 10px; border-radius: 15px; margin-

これからのプロジェクトに使ってみたくなるような素敵なアイデア満載のクリエイティブなスタイルシートのテクニックを紹介します。 今年もCSSの進化がすごかったですね。

Googleアナリティクスは、Googleが無料で提供しているウェブサイト分析ツールであり、多くの企業や個人が導入しています。 しかし、Googleアナリティクスは、簡単に導入できるということもあり、最初にトラッキングコードだけ設置して設定などは特にしていない、となっているサイトも多いのではないでしょか。 Googleアナリティクスをうまく活用すれば、他の有料の分析ツールに負けないくらいの機能を利用することができます。 今回は、トラッキングコードを設置した後、一番最初に設定しておくべき4つの基本設定をご紹介します。 Googleウェブマスターツールと連携する サイトに関する様々な情報を知ることができるGoogleウェブマスターツールですが、Googleアナリティクスと連携すると非常に便利です。 【Googleウェブマスターツールについては下記参照】 【保存版】Googleウェブマスターツー

こんにちは、あんみつ（@murata_atsumi）です。 この記事はCAMPHOR- Advent Calendar 2014の20日目の記事です。 私ブログが超苦手で普段からあんまり書かないから、何書こうか迷ったのですが、 一応CAMPHOR-には主にデザインの部分で関わることが多いので、 デザインのことを書こうと思います！ はじめに エンジニアの皆さん、そしてそうじゃない皆さんも、たまに『メイン画像』を作らなければいけないときがあるんじゃないでしょうか。 メイン画像というのは、こういうのとか （引用：https://www.cyberagent.co.jp/recruit/fresh/internship/ ） （引用：http://tokyometro10th.jp/future/opendata/ ） こういうのとかですね。 または、Facebookページのカバー画像や、OGP用

菱・籠目・雪輪・矢絣・唐草・亀甲・紗綾形などの和柄をはじめ、季節の風物詩や伝統的なものなど、日本の伝統に基づいたさまざまな無料ベクター素材を紹介します。 Japan Vector 素敵な和柄のフリー素材を探している人は、下記ページのまとめも参考にどうぞ。 商用利用無料、日本の伝統的な色使いが美しい和柄のパターン素材やテクスチャ素材のまとめ 素敵なグラフィックが多いので、管理者様にメールで連絡を取ってみました。 作成しているのは日本人のユニットで、すべてオリジナルの作品、少しずつ素材を増やしています、とのことでした。 素材の利用にあたっては個人でも商用でも無料、クレジットの表記は特に必要ないが記載してもらえると嬉しい、とのことです。 ダウンロードできる素材のフォーマットは、4種類。 .ai .eps .pdf .jpg（プレビュー用） 以下、数多くある素材の中からいくつか紹介します。 菊や桜

2014年、チェックしておきたいUIデザインをdribbbleから紹介します。 高解像度の.psdや.pngファイルをダウンロードできたり、動きをアニメーションgifで楽しめたりします。 2014年を振り返りつつ、来年はどんな素敵なデザインが生まれるのか楽しみですね。 GIF for the Weather App まずはUIの動きも楽しめるシリーズ。リンク先ではGIFアニメーションで動いています。 お天気アプリのコンセプトで、一日の天気をアコーディオン型のパネルで楽しく見せます。

同じウェブサイトでもデバイスによってデザインが崩れていたりすると、複数のデバイスを使い回すマルチタスクユーザーにとっては地味ながらストレスに感じるもの。そんなマルチデバイス化が必要なウェブデザインのアイコンにおいて、どんなサイズにしても劣化させずに使えるSVG形式で、無料かつ商用利用も可能というベクターアイコンパックが「GlyphPack」です。 GlyphPack - The Most Indispensable Web Font Icon Pack http://glyphpack.com/ GlyphPackは無料で商用利用も可能、どんなデバイスでも劣化せずに簡単に使えるSVGアイコンパック。今後のアップデートで新しいアイコンが追加されることもあるとのこと。さまざまな用途に対応可能な「アプリケーション」「エラー」「メディア」「ファイルタイプ」「ナビゲーション」「SNS＆ブランド」のア

最近のWebデザインでよく利用される1カラム、2カラム、3カラム、カード型、ボード型の基本的なグリッドをはじめ、ランディングページ、プロダクトページ、ギャラリー、ポートフォリオ、カート、FAQ、コンタクト、マップなど、さまざまなレイアウトが用意されたワイヤーフレームやフローチャートを作成するための素材を紹介します。 UI Titles UI TILES: WEBSITE FLOWCHARTS ダウンロードできる素材のフォーマットは、4種類。 .psd（72種類のレイアウトとチャート） .ai（72種類のレイアウトとチャート） .sketch（72種類のレイアウトとチャート） .png（72種類の各レイアウト） 各フォーマットにはそれぞれ72種類のレイアウトとチャートが揃っており、ワイヤフレームやフローチャートやサイトマップとして利用できます。

作成：2014/12/8 Web制作 > 比較的最近のjQueryプラグインやプロフェッショナルな方々が作成されたスクリプトの中から、サイト制作時に取り入れてみたいエフェクトを厳選してご紹介。今風の見え方を実現できそうなものをチョイスしました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ ファーストビュー １．スライドを立体的に切り替え ２．クリックで滑らかにページ遷移させる ３．背景にスライド、フルスクリーンで固定させる ４．横に移動するフルスクリーンスライド ５．キューブ系のスライドを表示 ６．下方向へドラッグするとページを再読み込みする ７．要素を上下にフワフワ動かす ８．外部要素をクリックで表示 ９．タイピングエフェクト 動作 １０．サーチボックスを画面全体にオーバーレイさせる １１．デイトピッカー １２．ドラッグ＆ドロップ 画像をアップロードする

毎年末にjQueryのプラグインをまとめていましたが、今年はプラグインの他に単体で動作するスクリプトも加えて、jQueryのプラグインとスクリプトの総まとめとして記事にしました。 今年目立ったのは、去年から引き続きアニメーション系、縦長ページ用のスクリプトでしょうか。 1カラムのレイアウトが流行っているためか背景関連も充実していました。それとSVGをより簡単に利用できるようになったのも大きな目玉ですね。 また、jQueryに依存しない、単体で動作するスクリプトも多く開発されるようになったと思います。 背景関連 SVG関連 縦長ページ関連 スクロール連動・パララックス関連 その他スクロール操作・補助関連 レスポンシブ関連 ナビゲーション関連 レイアウト関連 コンテンツ生成関連 コンテンツ紹介・ツアー関連 スライダー・カルーセル関連 画像拡大・配置・キャプション関連 アニメーション関連 エフェ