海外企業のWEB版アニュアルレポートの調査で見えた4つの特徴 - DESIGN JOURNAL - 株式会社モンスターラボ
海外のWEB版アニュアルレポートを調査してみた こんにちは、A.C.O.編集部です。A.C.O.ではR&Dの1つとして、定期的にグローバル環境の市場調査・研究を続けています。そのなかで最近は、海外のWEB版アニュアルレポートがさらに進化してきたな、と感じたので簡単に調べてみました。 そもそも、アニュアルレポートって何のためのもの？ アニュアルレポートは、企業における前年度の経営戦略や事業概況を報告するための年次報告書です。ここ数年では、CSR活動報告を取り込んだ「年次統合報告書」とする企業も増えています。そして、もっと多くの人に企業の価値を伝えるために、特に海外企業のアニュアルレポートのWEB化が加速しています。ここからは実例をもとにアニュアルレポートの特徴を見ていきたいと思います。 かなりクリエイティブな海外企業の事例 事例01：信念や情熱が伝わりやすいビデオメッセージ 海外では、多くの
Webで仕事をする人全員に知っておいてほしい文字詰め・カーニングの基礎知識 | 株式会社ZINE
株式会社ZINEの仁田坂です。編集者ですがデザインするのが好きです。 自己主張しすぎな圧倒的アイキャッチで失礼しました。今日はフォントと文字詰めの話をします。ぼくは雑誌編集者として数年働いた後にWebメディアをつくり起業、みたいな感じで働いてきたんですけれども、編集もデザインけっこう似ている部分が大きいと思っています。文字で読者に伝えるのか、視覚情報でユーザに訴えかけるのか。 結局のところ同じだよなあ、と思ったりします。編集もデザインも一緒くたにして考えたほうが都合いいことが多いです。 で、けっこうWebメディア見てると残念なデザイン、多いんですよね。 Webフォントでタイトル設定してるメディアは気にならないんですけれども、アイキャッチ見ると最悪……みたいなの多い。以前GitHubでアイキャッチ用のテンプレートを公開したもんだから、形だけ真似してデザインがてんでなってないメディアが増えまし
ユーザーをうまく誘導しよう！Webデザインで意識したい視線の動き方3パターン
ホームページを制作する際に考慮しなければならないことが「ページの中でもユーザーに見てほしい要素を正しく配置できているか」という点です。 重要な要素が埋もれてしまったり、読み飛ばされてしまったりしてはホームページを制作した意図が伝わらず、思うような成果をあげることは難しいでしょう。 今回は、ユーザーの視線の動きのパターン3つをご紹介します。 パターンをデザインに取り入れて、見やすくかつ成果のでるホームページ制作を行いましょう。 このニュースを読んだあなたにオススメ HTMLとは〜初心者でも分かるホームページの基礎技術〜 Webデザインに役立つ無料のツール・デザイン集まとめ ネットショップのデザインで意識するべき10個のポイント 1.上から下への視線の動き 人の視線の動きで最も自然な視線の動きが「上から下」への移動です。 ホームページにかぎらず本や雑誌なども、縦書きの場合でも横書きの場合でも基
チェックしていない日本語フリーフォントはないですか？最近リリースされた日本語のフリーフォントのまとめ
ひらがな・カタカナ・漢字が使える最近リリースされたものを中心に、日本語のフリーフォントを紹介します。 年賀状などに使える手書き文字、冬コミ用のデザインフォント、仕事にも使える読みやすいフォントなど、たくさん揃っています。 フォント紹介の前に各フォント制作者からのお願いごと。 フォントを利用の際には、利用条件やライセンスを必ず確認して守ってください。 最新版を公開！フォントの数が大幅に増えています。 2020年用、日本語のフリーフォント 417種類のまとめ 東青梅ゴシック / 東青梅ゴシック C 個人・商用サイトで無料利用可。同人誌や各種印刷物なども可。 梅PゴシックとM+ OUTLINE FONTSをベースに、よく使われる漢字の字形をより統一したフォント。伝統的な形を受け継ぎつつ、モダンゴシックとの折衷をはかり、視認性が重視されたデザインです。 字画が多くても、読みやすいですね。 廻想体
UIデザインの引き出しを増やしたいときや悩んだときに参考になるデザインギャラリー 20 - NxWorld
webサイトやアプリなどのUIデザインに悩んだときに参考になるデザインギャラリーを全20サイト紹介します。 よくあるコンポーネントのデザインや配置の仕方、カラーの組み合わせ方を眺めるだけでなく、ギャラリーによってはクールなものからユニークなものまである様々なアニメーションをまとめているところもあるので、デザイン以外の部分でも参考になるギャラリーもいくつかあります。 また、悩んだ・困ったときに見るだけでなく、お気に入りのギャラリーがあればブックマークやフィード登録などして普段から空いた時間に目を通すことでデザインの引き出しも増やせますね。 Calltoidea 細かいコンポーネントからページ全体のレベルまで様々なデザインがまとめられています。 カテゴリーを表すアイコンもわかりやすく参考デザインのキャプチャも大きくて見やすいので、個人的によく見るギャラリーサイトのひとつです。 Collect
デザインをブラッシュアップする際のチートシート｜dwango creators' blog（ドワンゴクリエイターズブログ）
※今回のデザインの話は主にプロモ−ション系サイト、バナーに関する事例が多めです。 UIの話には当てはまらない場合がありますのでご注意下さい 腹筋です。 最近、「腕の筋肉もすごいんですが何の仕事をされているのですか」と質問されました。ご期待に添えず残念ですが、只の肩こりの酷いWebデザイナーです(^q^) さてさて、タイトルに「ブラッシュアップ」とありますが、イメージカンプを出して、概ねOKをもらった制作物をさらにブラッシュアップするって難しいですよね。 デザインで言うと、「適切な余白を設けているか」「ルール（フォントや余白など）が統一されているか」「アイコンの世界観を統一」等など。もちろん、OKラインを大きく超えないように細かなところを調節していきます。 しかし、そもそも何が足りないのか。 ほぼOKがでた。アタリの部分を作り込む。写真を差し替える。 で、デザインのブラッシュアップって？ あ
最近のレスポンシブ対応サイトで見かけるナビゲーションのアイデア・実装方法のまとめ
去年ぐらいはレスポンシブ対応のナビゲーションというとハンバーガーメニューばかりでしたが、最近ではスクリーンサイズに合わせるだけでなく、コンテンツや階層構造に合わせたナビゲーションが増えてきました。 Webページやスマホページのレスポンシブ対応サイトで最近よく見かけるナビゲーションのアイデアや実装方法を紹介します。
流行なんて関係ない！いつでも使える黄金ウェブレイアウトUIパターン12個まとめ
海外サイトUXPin Studioで公開された「Web Layout Best Practices: 12 Timeless UI Patterns Analyzed」の著者 Jerry Cao より許可をもらい、翻訳転載しています。 ウェブサイトを訪れるユーザーの多くは、コンテンツを楽しみにしており、デザイン目的で訪れているわけではありません。 この記事では、いつの時代にもマッチする、12種類の黄金ウェブレイアウトパターンを問題点や解決法、具体的な使い方のポイントと一緒に見ていきましょう。 コンテンツ目次 01. カード型レイアウト 02. グリッドレイアウト 03. マガジンレイアウト 04. 枠なしレイアウト 05. スプリット・スクリーンレイアウト 06. 単一ページレイアウト 07. F型パターンレイアウト 08. Z型パターンレイアウト 09. 水平方向の左右対称パターンレイア
HTMLとCSSのコピペですぐに実装できる見出しデザイン14選
WEB制作で必ずと言っていいほど登場するものの１つに「見出し」があります。 そこで今回は、CSSだけで作られている見出しの中でも、実用性が高いものやCSSの最新要素を使ったものを厳選してご紹介します。コピペで簡単に実装できるので、是非使ってみてください。 飾り付きの見出し 擬似要素before、afterを使って飾りをつける見出しです。beforeとafterのcontentプロパティを変更すれば、☆や♡にすることもできます。 同じくbefore、afterを使うパターンです。transformプロパティで斜めにした長方形と長方形を重ねることで三角形を作っています。 beforeとafterを使ったシンプルな見出しです。ボーダーを指定した擬似要素の位置をpositionプロパティで指定しています。 ボーダーがある見出し キャプション付きの見出しです。シンプルなので使いやすいですが、レスポン
スクロールした時に面白いエフェクトを出すためのアイデアまとめ
作成：2016/09/12 Web制作 > スクロールを行ったときに、どれくらいスクロールしたのか知らせるものや、スクロール感がユーザーに伝わりやすい実装方法などをまとめました。 製品やサービスを解説するようなハウツーページや、トップページやサービスページで使いたいエフェクトのアイデア。 エンジニア速報は Twitter の@commteで配信しています。 インジケーター 進捗を示すインジケーターをヘッダー・サイド・フッター部分に固定してあるものをピップアップ。 ヘッダー どれくらいスクロールされたのか進捗状況を線で表示するインジケーター。コンテンツの量をさり気なく知らせることができるのがよいですね。CSSのみで実装できます。 See the Pen CSS only scroll indicator by Mike (@MadeByMike) on CodePen. CSS only s
[CSS]レスポンシブデザインでよく使うメディアクエリの書き方、ブレイクポイントの最適な値のまとめ
スマホやタブレット、ラップトップ、デスクトップ、最近はWebページを表示するデバイスは多様化しています。レスポンシブデザインでよく使われているMedia Queries（メディアクエリ）の書き方、ブレイクポイントの最適な値など、制作に役立つリソースやツールを紹介します。 各デバイスのブレイクポイントに合わせたメディアクエリの書き方 複数のブレイクポイントを使ったメディアクエリの書き方 人気のフレームワークのブレイクポイントの設定 レスポンシブの確認が簡単にできる最強ツール 各デバイスのブレイクポイントに合わせたメディアクエリの書き方 スマホ、タブレット、ラップトップ、デスクトップごとのブレイクポイント、そしてiPhone, iPad, Nexusなど各デバイス用のブレイクポイントに合わせたメディアクエリの書き方がまとめられています。 Simple CSS Media Queries デバイ
![[CSS]レスポンシブデザインでよく使うメディアクエリの書き方、ブレイクポイントの最適な値のまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/7c5c596162907ccc099585ca47e2a595ce4e13c0/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201603%2F2016091201.gif)
場面に合ったモバイルUIデザインを！リストビューとグリッドビューの違いとは？
anthonyはUX Movementの執筆者、チーフエディターです。素敵なWeb体験をこよなく愛し、ユーザのために日々奮闘しています。 モバイル端末でコンテンツのレイアウトをどうするかというのは意外と厄介な課題です。デスクトップは広々とした画面がありますが、モバイルでは限られたスペースしかありません。ユーザーはモバイル端末を使う時、一度にコンテンツのわずかな一部分だけしか見られず、それ以上見るにはスクロールする必要があります。 結局、モバイル端末で最も効果的なレイアウトとは何か悩むことになるでしょう。リストビューとグリッドビュー、どちらを使うべきでしょうか。ユーザーがいかに早く簡単に情報を見つけられるかは、この決定で変わってくるかもしれません。 リストビューか、グリッドビューか リストビューとは、コンテンツを一列に並べて表示したものです。文字が中心で画像はなく、もしあったとしても、文字の
【全て無料】デザインにアクセントを！クオリティに差がつくデザイン枠・飾り罫素材まとめ50選
ホームページや広告をデザインする際、"物足りなさ"を感じたことありませんか。 そうした時に、ぜひともアクセントとしてほしいのが「飾り罫素材」です。 境界線を入れるだけでもコンテンツにメリハリがつき、見た目の雰囲気をガラッと変えてくれます。 今回は、無料でダウンロードできる便利な飾り罫素材をまとめてご紹介します。 どれもフリーで使える素材となっていますので、気になるものがあれば早速ダウンロードしてみてください。 マーケ思考のデザイナーは強い！ 提案型デザイナーのススメ リード獲得が重視される「広告・LP・サービスサイト」などに携わるデザイナーの皆様に向けての資料です。成果を出すデザインにするために心がけたいポイントを制作前、制作中、提出と修正、公開後の効果検証まで一連の流れに沿ってまとめています。 無料で使えるデザイン枠・飾り罫素材50選 1.600+ Vector Calligraphic
iOS 9以下でもiPhone safariでインラインで動画再生する方法第三弾 - Qiita
いよいよFelicaポート搭載のiPhone 7が発表されましたね！サプライズもありまだまだ日本でのiPhone一強は続くのではないかと感じさせられました。 さて、そのiPhone 7に搭載される予定のiOS 10ではいよいよsafariでも動画のインライン再生が可能になります。 iOS 10 Safari から video の inline 再生が可能になります - latest log iOS 9以下でもインライン再生する iPhone Safariで動画をインライン再生する方法 - Qiita 【音声対応】 iPhone Safariで動画をインライン再生する方法続き - Qiita 以前書いたこの2つの記事で紹介した方法はいずれも、video要素のcurrentTimeを動かしてcanvas要素に描画するというものでした。 今更発見した新手法 今回見つけた手法では、canvas要素
CSS スタイルシート制作を楽にする！知っておきたい便利ツール25選まとめ
海外サイト Envato Blog で公開された「25 Free Web-Based Apps & Tools For Working With CSS」の著者 Paul Andrew より許可をもらい、翻訳転載しています。 CSS スタイルシートを作成していると、時間ばかりかかる退屈な作業をこなさなければいけない時があります。 たとえば、CSSアニメーションや FlexBox レイアウトを作成、調整したり、モダンブラウザ対応の書き方を思い出したり、レスポンシブ用にemをpxへの変換や CSS ファイルの圧縮やクリーンアップ、画像をデータURIへ変換など、どれもクリエイティブとは程遠いものばかり。 今回は、作業時間を大幅に短縮し、より快適なスタイルシートの作成ができる便利なツール25個をまとめてご紹介します。 紹介するツールを活用することで、これまで時間がかかっていた頭の痛くなる作業も、ボ
専門知識がなくても大丈夫！HTMLメルマガを配信するなら知っておくべきツール9選
メールマガジン(以下メルマガ)を送信する際の配信形式として、HTMLメールがあります。 HTMLメールであればテキストだけでなく画像を利用できるため、インパクトの大きい訴求を行うことが可能です。 今回は、HTMLメルマガを送信するなら知っておくべきツールを、作成・配信ツール、表示確認ツール、テンプレートツールの3つの項目に分けてご紹介します。 どれも手軽に利用することができるツールばかりですので、本記事を参考に自社に必要なツールを選択してください。 HTMLメールを手軽に作成・配信するなら 1.Benchmark Email http://www.benchmarkemail.com/jp/ 利用料金：1,500円〜/月 無料トライアルあり HTMLメールに特化したメール作成・配信システムです。 コードの専門知識がなくても、手軽にHTMLメールを作成して配信することができます。 コードエデ
FlexboxやFloatでレイアウトが崩れてしまう原因がすぐに見つかるChromeの機能拡張- Pesticide
CSSのレイアウトで思うようにいかない時に、最初に確認すべきことはページ上のすべての要素がどのようにレイアウトされているかです。これを知るには、各要素が区別できるように、要素ごとに異なるカラーのアウトラインをつけると便利です。 ページ上のすべての要素に、要素ごとに異なるカラーのアウトラインをつけ、親子関係も一目で分かる便利なChromeの機能拡張を紹介します。 Pesticide Pesticide -GitHub 以前当ブログで紹介したことがありますが、バージョンアップされており、更に便利になっています。 Pesticideは、2つの方法で利用できます。 Chromeの機能拡張（Pesticide for Chrome） スタイルシートファイル（外部CSS・CDNで利用可） 外部スタイルシートとしても提供されているので、ローカル環境でブラウザを問わず利用することもできます。 簡単なのでC
マテリアルデザインのサイトを簡単に作るためのフレームワーク８選
マテリアルデザインは、Googleが推奨しているデザインの概念です。GoogleのウェブサイトやAndroid OSは、マテリアルデザインをベースとしています。 最近では、マテリアルデザインを簡単に作ることができるCSS・JavaScriptフレームワークも充実してきており、誰でも簡単にマテリアルデザインを導入することができるようになっています。 そこで今回はいくつかある候補の中から、人気がありなおかつGithubへのコミットも活発にされているマテリアルデザインをベースとしたフレームワークを紹介します。 Materialize Materializeは、マテリアルデザインのCSSフレームワークとして人気のものの１つです。Bootstrapとほぼ同じような命名規則なので、Bootstrapを使ったことがある人であれば、すぐに理解できると思います。 ShowcaseページにはMateriali
意外と盲点だったCSS3の役立つ小技まとめ - コムテブログ
TL;DR リニューアルを行った時に、CSS3 で気づいたことや次回もまた使いそうなものなどを備忘録として書いておきます。基本的なものから見慣れないものまで。 CSS3 オートフィルの背景色を解除 chrome にて、テキストボックスのオートコンプリートした際、背景色が黄色になります。これを消したかったので を追記。色指定の箇所に任意の色を指定できますが、とりあえず白色で。 無事消えました。 Coderwall | Change background color for autocompleted inputs in Google Chromeでinputがオートフィルされてると背景色が黄色になるのを回避 – CSS | ごろつきめも backface-visibility で Chrome のチラつきを解決 fadeIn などのアニメーションを取り入れると Chrome でヘッダーやサイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
anime.js
