今回は私がブログデザインをする上で、参考にさせてもらっているブログまとめです(はてなブログ編)。 これらのブログは常にデザインに気を使って運営しているブログばかり。ブログの肝は記事の質かもしれませんが、人気ブログにしていくためにはブログデザインを強化することも同じくらい重要なので、是非、みなさんも参考にしてみてくださいね。 お薦めのブログデザイン5選: 1.はぁはぁブログ: 2.AIUEO Lab2: 3.はなこのブログ 4.それ、僕が図解します。 5.おうつしかえ: 6.しっきーのブログ: 7.マトリョーシカ的日常: 8.HSKぐうたらジャーナル: 今後もデザインを改良していきたい: グローバルメニューを実装予定: 文末リンク: お薦めのブログデザイン5選: 1.はぁはぁブログ: はぁはぁブログ はてなブログはここまで改良できるのか?というくらい、細かいところまでデザインが作りこまれてい
良いって何ですか? デザインの話をするのは、たとえ本業をしている方にとっても難しいことがあります。それが他分野の方ということになると、なおさらです。目的に沿って議論することで、デザインがより洗練されるわけですが、別の部署、他の役職の方との会話になると、なかなかうまくいかないことがあります。 その理由は、彼等がデザインのことを理解していないからというより、お互いが考える「正しい」を理解していないからということがあります。 Webサイトやアプリを設計・開発されている方全員「良いものを作りたい」と考えています。ただし、その「良い」のニュアンスは立場によって少し異なることがあります。「良い=売れる」と解釈する人もいれば「良い=使いやすい」と捉える方もいます。それぞれがもつ「良い」という価値観が、その人の意見や考え方に大きな影響を及ぼしています。 言葉だけでは理解ができない デザイン案を見せると、以
筆者は、このような画面を頻繁に目にします。なぜなら、デザインに疎い筆者自身がWebアプリを開発すると、このようなシンプルな画面がたくさん出来上がるからです。 そもそも業務アプリケーションでは、業務で取り扱う数多くの情報を、データベースや他システムなどから取得し、アプリケーション内でそれらの情報を、安全かつ正確に処理するためのコーディングを行う必要があります。開発規模が大きくなれば、再利用性の高い設計になるようさまざまな知恵を使う必要がありますし、取り扱う情報には機密性の高いものも含まれるため、セキュリティなどにも細心の注意を払う必要があります。そのため、どうしてもビジネスロジックの開発に注力しがちで、画面デザインやレイアウトなどのフロントエンド開発は、ついつい後回しになってしまいます。 しかしながら、Webアプリの操作性は、システムの顧客満足度を左右する重要なポイントになります。また、パソ
「2.5dBUTTON」はフラットデザインに似合うボタンが作れるサイトです。マウスを乗せるとポコッと立体的に浮き上がるボタンが作成できます。作ったボタンはHTML、CSSごとダウンロード可能です。 以下に使ってみた様子を載せておきます。まず、2.5dBUTTONへアクセスしましょう。 試しにボタンを作ってみました。このようにスライダーを調整するだけで色や形を決めることができます。マウスを乗せると上記のようにポコッと浮き上がります。 HTMLとCSSも自動的に出力されるので、あとはこれらをコピペすればOK。 こちらが実際に使っているときの様子です。YouTubeのロゴを作ったり汎用性が高いですね。ぜひフラットデザインのボタンを作成したいときにご活用ください。 2.5dBUTTON (カメきち)
「CSS Gradients with background-blend-mode」はCSSの「background-blend-mode」を活用した背景サンプルをたくさん紹介しているサイトです。ウェブデザインをやっている方には非常に参考になるサンプルばかりです。 以下に使ってみた様子を載せておきます。 まずCSS Gradients with background-blend-modeにアクセスしましょう。 このように「background-blend-mode」を使ったサンプルが用意されています。CSSが表示されていますが、値を変更するとその場で適用された背景を閲覧できますよ。 サンプル集の下部には、実際に画像を使用した場合とのファイルサイズの違いが比較されています。CSSだけで実現するほうが圧倒的にファイルサイズが軽くなりますね。ウェブデザイナーの方はぜひ学習の参考に使ってみてくださ
Nintendo Switchの純正プロコンを異次元レベルの操作性に!使わない理由がない革新的アダプター
メディアづくりを考えるとき、国内のメディアだけでなく、海外メディアに目を通すことで参考になることも多そうです。インスピレーションを得るために、デザインが優れていると思う、海外メディアを10個に絞って簡単に紹介します。 デザイン関係なく、注目の新興メディアを知りたい方は以下の記事も参考になさってください。 海外における新興ウェブメディアの隆盛 〜12のメディアから見えてくるもの〜 1. Narratively 「Narratively(ナラティブリー)」はビジュアルを全面に打ち出したデザインで、トップページも記事ページも見やすく美しいです。このようなビジュアル・ストーリーテリングを発信するメディアやプラットフォームは増えてくると思います。 Narratively | Human stories, boldly told. 2. OZY 「OZY(オージー)」は、ミレニアル世代(主にアメリカに
「Symu」はウェブデザインの議論に便利なサービスです。モックで作ったデザインをアップロードすると、その画像に対してコメントをつけることができます。さらにiPhoneやiPadなどで閲覧したときの見え方も確認できますよ。 以下に使ってみた様子を載せておきます。まず、Symuへアクセスしましょう。デザインのモック(画像)をアップロードします。 このようにデザインに対してコメントをつけることができます。複数人でデザインにつっこみをいれたいときに使えそうですね。 iPhoneやiPadmMacbookでの見え方も擬似的に再現できます。PCでみた場合とスマートフォンでみた場合では、やはり印象が違いますからね。デザインの議論をしたいときにご活用ください。 Symu (カメきち)
TOP > Design > デザイナー必見 デザイン性の高いUIキット「27 Useful UI Design Elements & UI Kits for Designers」 webサイトやスマートフォンサイトは、設計や構成レイアウト、デザイン感の決定からスタートし、さまざまな工程を経て完成に至ります。しかしどうしてもすべてを完了するまでには時間を要してしまうもの。今回はそんな時に利用したい、 デザイン性の高いUIキット「27 Useful UI Design Elements & UI Kits for Designers」を紹介したいと思います。 (Dashboard UI – Graphicfull | Graphicfull) いろんなデザイン感のUIキットが豊富にまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。 詳しくは以下 BI
本の紹介これは今読むべき!Web制作の今がわかりやすく説明されている「現場のプロが教えるWeb制作の最新常識」を読みました!2014年4月14日290 @JUNP_Nです。WEBCRE8.jpの酒井優(@glatyou)さんが共著として参加されている「現場のプロが教えるWeb制作の最新常識」をいただきました。Web制作者ではない僕が制作の本を紹介するのはおかしいのですが、Webに関わることをしている人は読んでおくべき本だったのでご紹介。 Web制作の現状やトレンドを知っているか知らないかでは大違い目まぐるしいスピードで変化しているWeb制作の現場。最近では「フラットデザイン」「レスポンシブデザイン」「パララックス」などWeb制作の職業についていなくても耳にしたことがあるキーワードがたくさん。他にもHTML5やSass、Gitなど新しい言語やプロジェクト管理について、今のWeb制作の現場がど
仕事の実績を紹介するページが欲しいけれど、みんなが使っているありがちなプロフィールサイトとは違うものがいい。そんなライターやデザイナー、デベロッパーなどには「Hoverboard.io」がおすすめです。 最近できたばかりのサービスで、完全無料、見た目もいい感じです。自分の作品を見せたり、ブログにリンクしたり、あらゆる職歴を紹介したりすることができます。筆者が登録してみたところ、プロフィールの設定に数分かかっただけで、かなりの出来映えのページができました。ページ上部に自分の好きなヘッダー画像を貼ることも可能。大きなヘッダー画像の上に名前とタイトルが載り、右下の個人略歴のアイコンから、SNSの自分のページへもリンクします。 その下にはブログエントリへのリンク、さらにその下にGitHubプロジェクトのリンクがあります。プロフィールの下には、仕事を時系列で並べることができ、職歴、学歴、ボランティア
1 pixel|サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 2013年度新卒入社、AmebaのSimplogでWEBデザイナーをしているリュウタロウと申します。 以前新卒デザイナー同士の勉強会がありまして、そこでの私の発表内容がすごく好評でした。 以降より多くの人に向けて発信したいと考え、この場をお借りして記事を執筆させて頂く事になりました。 これから綴るのは、デザインの細かいテクニックやハウツーではありません。 様々なジャンルのクリエイティブに通じる、基本的なモノの見方、考え方の話です。 「ワタシ、デザインワカラナイワ」 というビジネスパーソンも、普段やっている仕事や趣味とリンクさせながら理
はじめまして、デザイナーの越後です。 webフォント全盛の昨今ですが、まだまだ文字を画像化する機会も多く 画像で文字を扱うにしても、くっきりはっきり、意図した形でデザインがしたいものです。 そこで今回は「細かすぎて伝わらないアンチエイリアス」と題して、 少しマニアックなphotoshopでのフォント調整についてお話したいと思います。 おさらい:photoshopのアンチエイリアスについては、基本的には5種類 Photoshop上で文字を扱う際には、指定出来るアンチエイリアスは、 なし / シャープ / 鮮明 / 強く / 滑らかに の5種類です。 「なし」に関してはアンチエイリアスがかかっていないので、 文字のままのドットで表示されますが、 他の4つに関しては シャープ:文字が太い / くっきり 鮮明:文字が細い / くっきり 強く:文字が太い / なめらか 滑らかに:文字が細い / なめ
「画面」のデザインは、エンドユーザーから見た「プロダクト」との唯一の接点。超大事。 そんな画面のデザインにまつわる、エンジニアが「いじる」ときに気をつけると、もしかしたら面倒が減って争いが減ってみんなが幸せになれるんじゃないかなあ、とか、そもそもの設計上で考慮できると、もしかしたら使う人たちが幸せになれるんじゃないかなあ、というポイントを、思い付きで書いていくので、あとは誰か整理してほしい的な投げやり感あふれるアレコレ。デザインとコーディングの話を混ぜて書いてます。 空白の理由を考える編 その1. 空白にまつわる認識の相違 例えば、Tumblrのダッシュボード。右肩のメニューの隅までちゃんとレイアウトされてるなーって感じがします。 でも、もしあなたが「空白を理解しないエンジニア」だった場合、こんな感じにコーディングしてしまうかもしれません。 (※画像はイメージです) 「なーんか、素人感があ
デザイナーやアーティスト(ばかりではありませんが)の、デザインに関する名言を集めてみました。 ときには読み返して、デザインについて考えてみるのもいいかなーと思ってブログにしました。 いいデザインが浮かばないときや、ちょっと初心に戻って考えたいとき、世界中のデザイナーやアーティストの言葉を読んでいると、励まされたり今の自分を再確認できたりします。そんなデザイナー、アーティストたちが残した「言葉」をまとめてみました。有名な言葉もあったり、名もない誰かの言葉もあったりしますが、ちょっと考えさせられる深い言葉ばっかりです。 “Design’s fundamental role is problem solver.” デザインの基本的な役割は、問題の解決者であるということ。 Fast Company そもそも何でデザインが必要なの?そのデザインで問題が解決できるの? … いろいろ問いかけてきますねー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く