ブログのメインは記事本文。どんなにタイトルで惹きつけて訪問者を増やしても、肝心の記事が読みづらければ最後まで読まれないうちに離脱してしまいます。当然、シェアもしてくれないしリンクもしてくれません。 では読みやすいブログとはどのようなものでしょうか。そのひとつは、「流し読みしやすい文章」です。 読みやすいブログ記事を書くための基本とライティングテクニック 文章の改善はいますぐできることではありませんが、読み疲れさせないデザインにするのはすぐに実行できるかもしれません。 本記事では、記事本文が表示されるメインコンテンツの幅と、周囲の余白設定に焦点を絞って解説していきます。 有名どころ 18 サイトを調べて、各サイトがどれくらいの幅で記事を表示し、どのくらい余白をとっているのか調べてみました。ぜひご参考に。 2014 年に調査・公開した数値のため、参考サイトの内容が変わっている場合があります。

V-RESAS公開終了のお知らせ V-RESASにアクセスいただき、ありがとうございます。 V-RESASは2024年3月31日を持ちまして公開を終了いたしました。 新しくデータにより地域課題の分析評価を支援するサイト「RAIDA（レイダ）」を2024年1月31日から公開しております。 15秒後にRAIDAに自動的に遷移します。自動的に遷移しない場合は次のURLをクリックしてください。 RAIDA　https://raida.go.jp/

10のサイト事例に見るパララックスの効果的な使い方のヒント | アドビUX道場 #UXDojo 連載 エクスペリエンスデザインの基礎知識 短時間しか人の注意を引くことができない今の時代。実際に記憶に残る体験をつくり出すにはクリエイティブでなければなりません。そのために利用可能なテクニックは様々ありますが、最も便利な手段のひとつはパララックススクロールです。このテクニックは、訪問者をコンテンツに引き込む効果をつくり出します。 この記事では、パララックススクロールの基本を確認し、優れたパララックスをデザインするための実用的なヒントと、いくつかの優れた例を紹介します。 パララックスの仕組み 「パララックス」という言葉は、「変化。調整」を意味するギリシャ語の「parallaxis」に由来しています。パララックススクロールは、擬似3D効果をつくり出すために利用できるデザインテクニックです。ユーザーが

過去にも何度か話題になっていましたが、ここ最近TwitterのWeb制作者界隈で過去最高に「Webデザイナーがコーディングできるべきかどうか」という議論が白熱しているように思います。 かなり悩んだのですが、私なりにお話しできることもあるかと思い、この件について私の考えを記事にまとめて公開することにしました。 コーディングとはどこまでを指すか 「コーディング」といっても、人によって指しているものが違うと思います。 ここでは4つの段階に分けてみます。 ごく基礎的なHTMLやCSSを書くことができるコーディングのトレンドなども抑えた上でモダンなHTMLやCSSを書くことができるHTMLやCSSに加え基礎的なJavaScriptを書くこともできるHTMLやCSSはもちろん、本格的なWebアプリケーションの開発もできる このうち1に関しては、私は「議論の余地なくWebデザイナーも書けるべき」だと思っ

本記事は、ブログ『RANDOMWIRE』の運営者の許可を得て、翻訳しています（元記事）。 静寂が満ちる禅庭園、美しい神社、静穏な寺、洗練された茶道。日本の伝統建築、現代建築、書籍、雑誌は世界中のデザイナーの羨望の的だ。 だが、どうしてか、こうした巧みな技術はデジタルプロダクトには生かされていないようだ。特にそれが顕著なのは、ウェブサイトだ。その多くが、1998年のスタイルから変化していないように見える。 例１：楽天市場 有名な日本のサイトの多くを見てみると、次のような傾向が見られる。（例えば、 Yahoo Japan、楽天、ニコニコ、JR東日本、読売新聞…） 隙間なく敷き詰められている文字 小さく、画質の悪い画像 数えきれないほどのカラム 色同士の調和に欠ける派手な色使い、きらきら光るバナー Flashのような、過剰に使用される時代遅れのテクノロジー 美しい俳句、質素なわび・さびとはかけ離

今回抜擢されたのは、アレッサンドロ・ミケーレ、42歳。ローマ出身で、ローマのファッションアカデミー ACCADEMIA DI COSTUME E DI MODAでファッションを学ぶ。その後、フェンディのシニア・アクセサリー・デザイナーとして経験を積み、2002年トム・フォードにその才能を見いだされ、グッチのデザインオフィスに入社。2006年にはレザーグッズのデザイン・ディレクター、2011年5月にはフリーダ・ジャンニーニに次ぐ、アソシエイト・クリエイティブ・ディレクターに就任した。また、インテリアデザインにも情熱を注ぎ、2014年9月よりリチャード・ジノリ（RICHARD GINORI）のクリエイティブ・ディレクターも兼務している。

機能的なアニメーションとは、明確な目的を持った、さりげないアニメーションです。ユーザーの負担を減らし、状態の変化について行けるよう案内したり関係を示したりします。さらにUIに命を吹き込む効果もあります。このようなアニメーションは、6つの特徴を満たしていることが多いのです。今回はその6つの特徴を紹介します。 1.期待通りに反応すること UIデザインにおいてフィードバックは非常に重要です。実生活でも、ボタンや物体は私たちの接触に反応してくれます。UIでも、ユーザーは同じことが起こるのを期待しているのです。 ユーザーが行った操作には素早く反応し、新しい要素とアクションを関連づけるようにしましょう。 2.関係性を保つこと 新しく作成された要素とアクションに関連を持たせ、ユーザーが変化を認識できるようにしましょう。下にメニューのアニメーションを2つ用意しました。1つ目の例ではタッチした場所とは離れた

エンゲージメントを向上させるには、UIにソフトモーションを取り入れるのが有効です。数年前、ウェブではフラットデザインが大流行しました。これまでにないほどウェブが美しくなった一方で、どのサイトも同じに見えるという問題が発生しています。そこにソフトモーションを加えることで、フラットデザインのミニマルさを壊すことなく、ユーザーにやさしいサイトが作れるのです。 ソフトモーションはウェブのスパイス 多くのサイトが、ソフトモーションを取り入れ始めています。ソフトモーションでユーザーをもっと夢中にさせ、魅力的なデザインに仕上がります。さまざまな種類がありますが、その中から代表的なものをご紹介します。 スクロール スクロールと同時に要素が現れる演出は美しいですが、今ではどのサイトでも行われており、普通になってしまいました。そこで、スクロール自体にわずかな動きをつければ、ユーザーの操作に対して繊細に応えるこ

こんにちは、デザイナーの藤田です。 デザインをやっていると、見出しのデザインに悩むことって結構ありますよね！ 自分のデザインストックを増やすためにも、今回のブログでは今っぽい見出しデザインをタイプ別にまとめてみました！ 独学でつまずいていませんか？ 現場で活かせるWebデザインを効率的に学びたい、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGではWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。 詳細を知りたい方は、ぜひスクールの詳細をチェックしてみてください！ →スクールの魅力が分かる資料はこちら！（資料請求） ※この記事は2022年3月に編集部が情報を更新しました ジャンプ率パターン ミニマムなデザインでは見出しに過度な装飾を加えずに、本文に対し見出しの文字サイズを大きくすることで見出しを目立たせるサイト

Apple, Microsoftをはじめ、Sony, IBM, Intel, Adobe, Dell, FedExなど、有名ブランドのデザインガイドラインを紹介します。 スタバ、ケンタ、Heineken、NASA、LEGOなど、ちょっと珍しいガイドラインもあります。 LEGOのガイドラインは、かなりLEGOらしい出来映えです。

最近ありがたいことに、色々な業界の方から、 サイバーエージェントのクリエイティブについてご質問を受ける機会が多くなってきました。 ネイティブアプリ市場における、トレンドの移り変わりは非常に早く、 日々新しいサービスや開発ツールが生まれています。 そういった流れに対し、これまで主に静的なデザインを生業としていた 「サービスデザイナーの役割」が、ここ数年で飛躍的に広がってきているのは、 弊社のみならず、業界全体にも言えることではないでしょうか。 そこで今回は、次々に溢れ出てくるUIデザインやサービスのトレンドに対し、 「日々、どういうインプットをしているのか？」「クオリティをコントロールするために意識していることは？」など、僕が毎日心がけている3つの習慣についてご紹介したいと思います。 １. 毎日、決まったサイトをクロールしてみる 突然ですが、僕のブラウザには 普通のブックマークとは別に、「毎

角丸の話題が盛り上がってましたね 先々週webデザイナーである彩さん(@maritime_color)のブログDesign Colorで、角丸をどういう場合に使うか、という記事がすごい話題になってました！ デザイン時に注意したい角丸の使いかた | Design Color そしてその後、ナナメウエの変態イラレラー(褒めてます)すずきさん(@suzukisan__)もそれに続き角丸に触れる記事を書いたりしていました。 illustratorで角丸を扱う際の注意点 ※追記しました | ナナメウエblog 私も以前デザインが苦手な人も分かる「デザインは全て意味がある」6つの要素という記事を書いたとき、角丸についてはさらっと触れるに留めたのですが、いずれもっとがっつり言語化したいものだと考えていました。 気になることもあったし、ちょうど良いので今回便乗して記事にしてみようと思います。 形状としての

作成：2014/09/29 更新：2014/11/01 Webデザイン > Webデザインの流行りを知るために、トレンド感のある配色や洗練されたレイアウトをつくり上げるために、知っておきたいことや方法など。他に、Web制作において今後積極的に挑戦してみたいものをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 配色 １．ネオンカラー ２．washed out ３．グラデーション ４．マテリアルデザイン 模様 ５．ジオメトリー 背景 ６．背景色を時間の経過で変化させる ７．スクロールで背景固定、コンテンツだけ動かす 一部に動きをつける ８．シネマグラフ ９．線画 (SVG) １０．グリッチ UI・他 １１．ゴーストボタン １２．プレースホルダー １３．ローディングエフェクト １４．pushState １５．ドロアー レイアウト １６．タイルレイアウ

WEBサイトを運営していれば、サイトに訪れてくれたユーザーに【申し込み】【購入】【資料請求】【問い合わせ】などのアクションを、たくさん起こして欲しいと考えると思います。 そのためWebクリエイターは、どうしたらコンバージョン率や数が高まるのかを日々考え・テストを繰り返しています。 私もそのことを考えている1人として、今回はサイトの目的を達成させるために欠かすことのできない大変重要な要素の1つである【行動を呼びかけるためのボタン（Call to Action Button）】についての考えをまとめたいと思います。 目的を達成へと導くボタン ボタンはホームページの最終的な目的である【申し込み】【購入】【資料請求】【問い合わせ】などのアクションを、ユーザーに起こしてもらうためには欠かせない要素の1つです。ボタンのデザインやボタン内の文章を変えただけで、資料請求が増えたなんていう事例はたくさん存在

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

I/O 3000は、Webデザインに関わる人のためのWebデザインギャラリーサイトです。国内外を問わず、Web制作の参考となるサイトをセレクトしています。

こんにちは。アートディレクターの長岡です。 最近は、毎朝娘を保育園へ送ってから出社しています。 子育てにも優しい会社、それがLIGです！！ イクメンぶりをアピールしたところで、本題に入りたいと思います。 Webデザイナーならば、賞を取ってみたいと考えたことが一度はありますよね。今回は、そんなWebデザインのインスピレーションを刺激してくれる優れたWebデザインアワードサイトを厳選して5つご紹介します。 世界のアワード Awwwards https://www.awwwards.com/ 言わずもがなでずが、世界でもっとも有名なWebデザインアワードです。 デザインや動きのインスピレーションを刺激したい方はこちらがオススメです！ サイトに登録すれば、下記の項目に簡単に投票できます。 デザイン クリエイティビティ ユーザビリティ コンテンツ FWA http://www.favouritewe

こんにちは、Web制作会社「株式会社LIG」の代表取締役会長、ゴウです。 今回、LIGで働くWebデザイナーとディレクターにアンケートを取り、制作する際に普段参考にしているかっこいいサイトや、おしゃれなギャラリーサイトを集めてみました。 毎日仕事で使っている彼らのチョイスなので、かなり実践的で参考になる、かっこいい・おしゃれなサイトが集まったと思います。 全部で27個も集まったので、ジャンル別に分類もしました。それではいってみましょう！ デザインの引き出しを増やすには？ デザインの引き出しを増やすには、インプットのほかに、自分のアウトプットに対して誰かからフィードバックをもらうという方法もあります。周りに相談できる人がいなければ「スクールでの勉強」もおすすめです。 💡現役のプロからデザインを学べる「デジタルハリウッドSTUDIO ｂｙ LIG」の詳細はこちらから ※このページは、2021

こんにちは。年末ですね。クリスマス、忘年会、年越し、お正月と忙しい時期でしょうか。お仕事もラストスパート頑張りましょう。 最近ランディングページでも、フラットなデザインだったりわりとシンプルなデザインを作ることが多くなってきている気がします。昔のようにごりごりに装飾を使うというよりも、“今っぽい”シンプルおしゃれなものを作りたいですよね。そこで参考になりそうなものが、雑誌のデザイン(エディトリアルデザイン)です。紙とWebなのでそのまま真似るのは難しいですが、ちょっとしたあしらいなら参考にできそう！今日はそんなあしらいを紹介します。 版ズレ風文字 カンタンだけど結構おしゃれに見える、そんなあしらいです。基本的には濃いフチに薄い色をズラすのが良いかと思います。見出しに使えそう？ 鉤括弧 鉤括弧といっても普通の「かぎかっこ」ではなく、細めに大きめに、テキスト全体を囲うように使うのがポイント。こ