どうすれば「リッチな」印象のページになる？ ランディングページの製作時、デザインを「こんな印象のページにしたい」というのはあっても、いざ「どんな配色で」「どんなフォントで」「どの程度の派手さで」を決めるとなると、一体どうやったら自社のターゲットに適したデザインに仕上がるのか分からない！ ということはありませんか？ 今回は、「真面目で冷静な」「先進的な」「信頼感のある」といったイメージ・印象ごとに、適した配色・フォント等デザインを実際のサイトを例に出してご紹介します。 あなたの「こんな印象を与えたい」という思いをデザインにするとこうなる！ というのを具体的にまとめていますので、デザインの方針を立てる上での参考にしてください。 ※ランディングページ改善に重要な要素を大きく4つに分け（ファーストビュー、ライティング、導線、その他のポイント）それぞれの項目で訴求ポイントのチェックが行えるシートを無
10/4に渋谷で開催された「モバイルUI/UXのキホン」 に参加しました。2011年からいろいろなテーマで開催されている歴史のある勉強会なのと、ディスカッションや意見交換を通じた双方向性を大切にしている、学びの多い勉強会でした！ 今回は勉強会の中で特に参考になった点を書いていきます！ 🍣 発表スライド発表の際に使われたスライドです。しっかりとした内容です！ 発表スライドは「prezi」というサービスを使っているそうです。動きのあるカッコイイデザイン！ 🎃 UI/UXは最近のバズWordデジタルガジェットでは特にいえることですが、市場が成熟してきて機能的な差別化が難しくなってくると、ユーザーの体験(UX)が重視されるようになってくるそうです。スマホアプリケーションは特にこういった要素が強く、ココ最近は『UI/UX』がバズWordになっているそうです。 🐹 UI/UX/IAの言葉の定義ま
内容：「PDFzen」は、オンラインでPDFに書き込みが行えるサービスだ。任意の位置にテキストを記入できるほか、ドローツールで線を書き込んだり、気になる箇所にコメントを追加して、ブラウザ経由で相手に見てもらうことが可能だ。 「PDFzen」は、オンラインでPDFに書き込みが行えるサービスだ。任意の位置にテキストを記入できるほか、ドローツールで線を書き込んだり、気になる箇所にコメントを追加して、ブラウザ経由で相手に見てもらうことが可能だ。 使い方は簡単で、まず最初に対象となるPDFをアップロード。作業画面が表示されるので、プレビューを見ながらツールを用いて描画を行う。用意されているのは、テキストボックスの挿入ツール、フリーハンドのドローツールのほか、注釈に使うコメントツール、ハイライトツールがある。これらのツールを用いて記入したのち、発行される固定URLを相手に送れば、書き込んだ内容をブラウ
ソーシャルボタン設置コードの注意点 今回の記事で掲載する設置コードは、「スクリプト部分」（JavaScript）と「表示部分」を分けています。 もし同じソーシャルボタンをページ内に複数設置する場合は、各「スクリプト部分」は1度だけ記述すればいいです。その方が読込み時間も短縮できて、表示速度の高速化もはかれます。「表示部分」は設置数だけ配置してください。 「スクリプト部分」の設置場所は、5種類のソーシャルボタンとも、</body>タグの直前がオススメです。もちろん<head>タグ内でもいいけど、前者の方がボタン以外の表示は速くなります。 さらなる高速化をめざしたい方は、5種類のソーシャルボタンのスクリプトを1つにまとめる方法も記事にしていますので、ぜひ参考に読んでみてください。 ツイッター/Twitterの設置コード スクリプトのコード 上でも書きましたが、配置場所はどこでもいいです。ページ
MAIL MAGAZINE 読み物としてお楽しみいただけるコンテンツや、最新の製品情報などをお届けしています。 ※プライバシーポリシーをよくお読みいただき、同意の上ご登録ください。
自分用に日本語フリーフォントをまとめ〜個人や商用などで無料ダウンロードできる日本語のフリーフォントを紹介〜年賀状にぴったりなフォント、手書きフォント、スタンダードなゴシック・明朝体などの漢字が使えるフリーフォントが揃ってます（一部を除く）フォントを利用の際には必ず同梱もしくはウェブサイトのライセンスをご確認ください。また規約・ダウンロード形態が変更になる場合があるのでご了承下さい。 フロップデザインフォント うつくし明朝体 フロップデザインのフリーフォント一覧ページ 自由の翼フォント [browser-shot width=”600″ url=”http://tanukifont.sblo.jp/article/74591320.html”] アニメ『進撃の巨人』のOP2をイメージ 2/3角フォント [browser-shot width=”600″ url=”http://opentyp
こちらのページは tanukifont.com へ移転しました。お手数ですがブックマーク等の変更をお願いします。20秒後に新URLへジャンプします。
Webサイトを高速化をすることによって得られるメリットは様々です。ユーザーエクスペリエンスの改善といった話とは別に、サーバーの台数を減らせることも大きなメリットでしょう。 サーバーの台数が減ればコストも下がるし、運用も楽になりますので、Webサイトの高速化はSEO対策に限定せずに実現したいところです。 しかし、「高速化しよう」「表示速度を改善しよう」といっても、実際に高速化を阻害するような要因を知っていなければ、どう取り組んで良いか分かるはずもありません。 今回の記事では非エンジニアの方でもサイト高速化のポイントがある程度理解できるように、大まかに要点をまとめています。 ＼ナイルがリードを増やした秘密を公開／ 高速化のための基礎知識 高速化という言葉の中には、大きく分けて２種類の概念が存在します。 フロントエンド側での高速化 サーバーサイド（バックエンド）側での高速化 フロントエンドとは
最早至る所で見聞きするフラットデザイン。Appleを初めGoogleや各ウェブサービス、アプリケーションのUIでもどんどん取り入れられています。ご存知の通り凹凸が無く巧みに配色を考えられた美しいデザインで、しばらくトレンドとなる事は間違いないでしょう。 そこでやはり気になるのがフォント。こだわりだせば切りが無いものですが、一度これというものに出会うとデザインの基盤として大活躍してくれます。 今回Webで見つけて早速持っているMac全てにインストールしたフォントはこちら。 M+ FONTSの紹介 M+ OUTLINE FONTS はコンピュータなどでの個人利用をはじめ、商業目的での利用、フォント内容の改変、改変後の再配布にも制限の無い、自由なライセンスで公開しているアウトラインフォントです。 海外のフォントはかっこいいのがたくさんありますが、結局英数字だけなので日本語を使用したい場合はバラン
「HTML5 MAKER」はHTML5のアニメーションを簡単に作成できるサイトです。HTML5でアニメーションを作るのが簡単に行えますよ。ドラッグ＆ドロップで画像やテキストを追加し、アニメーションをつけることができます。PowerPointと似たような動作でHTML5のアニメーションが完成します。 以下に使ってみた様子を載せておきます。まずHTML5 MAKERへアクセスしましょう。登録不要で作成できるので、早速「CREATE ANIMATION」からアニメーションを作ってみましょう。 このように、画像やテキストを追加していきます。下部にアニメーションの設定がありますよ。開始時のアニメーションや終了時のアニメーションが設定できます。左側にスライド一覧があります。一つ前のスライドを複製できるので、連続したアニメーションを使うときに便利ですね。完成したら、「Save」するとHTML5形式でまる
はじめに JsRenderは高速、軽量、高性能なJavaScriptテンプレートエンジンです。JsRenderを使うと、ブラウザ側で動的にテキストやHTMLを生成できます。 JsRenderはoutlook.comなどのサイトですでに使われており、今後利用者が増えることが期待されています。先日、JsRenderの正式版のリリースが近いことが、作者であるボリス・ムーア氏のブログで発表されました。そこで、正式リリースに先立ちJsRenderの使い方を紹介していきます。 対象読者 JavaScriptテンプレートエンジンに興味のある方 JavaScript、jQueryの基本を理解している方 必要な環境と準備 JsRenderとjQueryを以下のサイトからダウンロードしてください。JsRenderは単体でも動きますが、jQueryのプラグインとしても機能します。 JsRenderのダウンロード
皆さんはUIの動きを考えるときに、どんなものを参考にしていますか？いつも簡単にぴったりの動きが思い浮かぶわけではないし、悩んだときに何か参考になるギャラリーサイトなどがあったら便利だと思います。今回フランス人WebデザイナーのWalter Stéphanieさんが“Interface Animations and Transitions: where to get inspiration”というタイトルでUIのアニメーションやトランジションのインスピレーションを得られるサイトを紹介していたので、本人の許可を得て翻訳しました！ （以下”Interface Animations and Transitions: where to get inspiration”の翻訳。） photo credit: Jorge Quinteros via photopin cc UI/UXデザインにおいて、細
多様化する会員登録画面 色々なWebサービスの会員登録画面を、導線やSNS連携ボタンの配置を主軸に分類してみました。 各サービス、会員登録CVRを上げるために、導線や提示方法を工夫しています。また、SNS連携が必須になってきたことによって、画面に占める要素が増えてきており、その配置方法にも工夫がみられ面白いです。 ※キャプチャ取得タイミングの関係で、古いデザインもあるかもしれませんがご了承下さい。 ポップアップ提示パターン Sumallyやpixivは、Cookie制御がされており、初回訪問時にアグレッシブにポップアップを提示してきます。 Sumally pixiv Blabo!やAirbnbは、会員登録リンクを押すとポップアップで提示されます。 Blabo! Airbnb SNS連携ボタンが上に配置されているパターン 通常の会員登録への導線やフォームの上に、各種SNSのボタンが配置されて
こんにちは、代表の藤原です。 私は色々な仕事を兼務しているのですがその中でも最もキャリアのあるデザイン作業には特に思い入れが強くあります。 以前は会社員としてアートディレクターをしていたこともあり若いデザイナーにデザインを教えてきました（生意気ですが…）それを活用している人もいれば全く違うメソッドでデザインをする人もいます、それはそれで全く問題ありません。ここで紹介するのは私の独学と上司や先輩から見聞きしたことを独自にカスタマイズした独自のデザイン理論になります。 デザインと一口に言ってもWebデザイン、グラフィックデザイン、プロダクトデザインなど数多くありますので今回はWebデザインを基軸で考えますが現在弊社でお仕事させていただいているアプリなどにも転用できる考え方なのでUIデザインのお話しでもありますがタイトル的にはSEOを加味してWebデザインとしてあります。 少しこの記事は長くなり
ブランドの顔としての役割を果たす「ロゴマーク」。 企業のロゴやサービスのロゴは、その会社やサービスのメッセージを発信するとても重要な意味を持ちます。そんなロゴのデザインを行う際に、数多くのロゴを見ることでデザインの引き出しを増やすことは必要不可欠。 そこで今回は、ロゴデザインが画像一覧で見られる海外や国内のギャラリーサイトを10個ほどご紹介します。会社やブランドのロゴ、かっこいいロゴからおしゃれなロゴまで、自分の目的に合った参考になるデザインが無料で見つかるのでぜひご活用ください。 参考になるロゴデザインが一覧でみられるWebサイト それではロゴデザインの参考になるWebサイトを10サイトほどご紹介します。ロゴ作成でお悩みの方はぜひ、訪れてみてください。 LogoPond LogoPondは、かっこいいロゴなどクオリティの高いロゴが集まる海外のギャラリーサイトです。 ロゴ作成時にインスピレ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く