この記事では現役デザイナーDmitriy Buninが、より良いアイコンをデザインするときに心がけている8個のポイントをまとめてご紹介します。 WebサイトのUIインターフェースにおいてアイコンは重要なデザイン要素のひとつです。 アイコンは、コマンドやコンテンツを視覚的にあらわし、背後にある意味合いを伝える言語と言えます。ユーザーがすぐに理解、認識できるようにシンプルで効果的なビジュアル、メタファーを表現する必要があります。 現役デザイナー直伝、アイコンデザインがもっと良くなる８個のヒント ヒント１ – グリッドを設定しよう アイコンはひとつだけ作るのではなく、ほとんどの場合はセットでデザインすることになります。アイコンセットの統一感を持たせるにはグリッドが必要となります。 以下サンプル例のようにセーフゾーンを決め、キーラインを設定しましょう。アイコンのまわりには、少しの余白スペース（Bo
Responsive design gets a whole lot faster A Framework for any device, medium, and accessibility. Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device. Foundation is semantic, readable, flexible, and completely customizable. We’re constantly adding new resources and code snippets, includi
CSS with a minimal footprint.Pure is ridiculously tiny. The entire set of modules clocks in at 3.5KB* minified and gzipped. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you'll save even more bytes. * We can add correctly :) the numbers above are individu
こんにちは、ネットで何でも買えちゃうから外出る必要ないな・・・という危ない思考になりつつある相馬です。 ちょっと前だと、日本のECサイトといえばバナーばっかりでごちゃごちゃしたものばかり、という印象でした。 特に楽天のサイトだと今もそんな傾向はありますが、リニューアルのハードルが高いECサイトですからなかなか難しいところですね。 今回は、ECサイトでも洗練されたオシャレなデザインのサイトを集めました。 ECサイトといえば商品の見易さが第一ですが、そんな中にもデザインに重点を置いたものばかり。 ECサイト運営者の方やこれからオープンを控えている方は、一見の価値有りです。 オシャレなECサイト7選 solemo solemo ECサイトで陥りがちなバナーの多さによる乱雑なデザインにはならず、一つ一つ丁寧にデザインされたバナーのレイアウトで、その多さが気になりません。 カテゴリごとの週間売れ筋ラ
この記事では、インスピレーションを与えてくれる、Webデザインの参考になるサイトを紹介します。 サイト全体のデザインやレスポンシブデザインに特化したサイト、サイトパーツ、ロゴ、アイコン、バナーなどを収集して紹介しているサイトなど10サイト厳選しました。あなたのWeb制作の刺激になること間違いなしです。 1. MUUUUU.ORG クオリティが高く、縦に長いサイトを収集しているギャラリーサイトです。サイト自体シンプルで使いやすく、またカテゴリー分けが詳細でとても探しやすいサイトです。 2. 現代デザイン 技術的、デザイン性がすぐれたサイトを収集したギャラリーサイトです。カテゴリーは業種と色、日時のみですが、業種を細かく分類しています。また、気に入ったサイトをブックマークに入れることができます。 3. I/O 3000 国内外問わない、秀逸なデザインのサイトを収集しているギャラリーサイト
サイトのデザインを変更しようかと思ったのですが，自力でデザインを考えるのは限界があるのでフリーの HTML/CSS テンプレート集をざっと探してみました．尚，どのサイトが人気なのか分からなかったので，各種ソーシャルメディアのカウントを取得して併記してみました．海外サイトばかりなので，SBM としてははてなブックマーク以外に Delicious のカウントも取得しています． 掲載されてあるデザインはまったく見ずに，サイトの使いやすさ（と言うか「広告の少なさ」かな）だけからの感想ですが，個人的には http://www.solucija.com/ が使いやすいかなぁと言う気がしています． URL Delicious Hatena Twitter Facebook 1 http://www.oswd.org/ 24,170 951 471 1,002 2 http://www.freecsste
CSS HappyLife ZERO が移転したのでお手数ですが、消えちゃう前にブックマーク等変更してもらえるととても嬉しいです。 制作会社でコーディングする場合、社内のガイドライン的なのが有ったりデザイナーもある程度固定されてると思うので、毎回似たような事を確認したりとか、このデザインはどういう意図なんだろう？ってのも、何度か同じ人とやってれば見えてくる訳ですが、フリーランスの場合だとデザイナーは毎回違っていたり、当然ディレクションをする人も違うので最初に確認しておきたい事が有ったりします。 って事で、その辺りをまとめてみたり、デザインを渡されたときにこのデザインの意図は？って思う事とかもばーっと書いてみます。はい。 なので、デザイナーさんもコーダーにデザインを渡すときに気をつけて欲しい点とかもわかってしまうすばらしい内容（だと良いな）！ じゃあまずは最初に確認しておきたい基本的なことか
2015年7月17日の記事を再構成（文言の追加）をして作成した最新記事です。 WordPressはオープンソースのブログソフトウェアです。商用目的でも無料で利用することができ、機能が充実していることから多くのユーザーが利用するようになりました。 WordPressはオープンソースであることから、世界中から参加している多くの開発者によってバージョンアップが繰り返され、ユーザーは常に新しい機能を利用することができます。 プラグインをインストールすれば様々な機能を実装することができ、ブログばかりでなく、その汎用性の高さからWordPressをコーポレートサイト作成に利用する企業も増えています。 サイト開発を担当するエンジニアの立場からすると、WordPressで構築したサイトは、記事やお知らせ等の更新をブログと同じような感覚で行うことができるため、手離れが良いとされています。 もちろん、しっかり
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
先日、ベースキャンプ名古屋にて開催された WCAN mini 2015 Vol.1 「UXデザインプロセスを活用したコンテンツの評価方法」（講師: 長谷川 恭久さん）の参加レポートとなります。 このセミナーでは、主に Web サイトにおけるコンテンツの実状と把握、その評価やより良いコンテンツを提案するための UX デザインの手法をレクチャーとワークショップを交え、5時間で学ぶというものです。 良いコンテンツを設計し提供するためには、ユーザーを理解すること・今のコンテンツを評価すること。これらは制作プロセスでは当たり前なことでも「できていない現実」に改めて気付かされます。いくつか自分なりの解釈も含めて、特に印象的だった内容をハイライトとしてレポートします。 良いコンテンツとは？ 「良い」は誰が決めるのでしょうか。利用者、ユーザーです。コンテンツ提供者は、ユーザーになり代わって良いコンテンツを
Webデザインをするときに、必ず使うスタイルシート。思うようなレイアウトを作るために、チェックしておきたいブロックレベル要素や、インライン要素のクセみたいなのをまとめてみました。後半はスタイルが反映されない原因のひとつ、スタイルの優先順位についてです。 Attention 記事公開時からいろいろと勉強して、この記事内で紹介している事柄で、間違った解釈をしていたなーと気がつきました。 この記事の中でいくつか追記してありますが、詳しくは、新しく書いた 11月7日の記事：CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ を読んでみてくださいね！ New Post Webサイトをデザイン、レイアウトするのに欠かせないのが CSS（Cascading Style Sheets、スタイルシート）ですね！今では CSS3 が話題を集めていて、CS
というわけでブログデザインの5回目の大改築を行いました。 リデザインの受注側のお話はクリエイターボックスさんの記事を参考に、今回は発注側としてどのような事を行ったかを記載して行きます。 「ホームページを作る人のネタ帳」さんのリデザインをしました リデザインにあたり、どのようにデザインを決めて行ったかというのがポイントです。 打ち合わせ あちらの記事にも記載されてますが補足。 リデザインにあたり、まずは入念な打ち合わせをします。Yamadaさんからの要望は、 ・とにかく読みやすく、スッキリと ・差し色にピンクを使いたい ・jQueryを使った何か仕掛けが欲しい の三点。それに加えて、リデザイン時に考えるべき下記の点も話し合いました。 今回のリデザインの最大の目的は記事の見易さの向上と、3カラムから2カラムへの変更です。 海外でも2カラム化が進む中遅すぎるとか言われそうですが、メインコンテンツ
☆ご注意☆ この記事は 2011年5月29日 に書いたものです。情報が古い可能性がありますのでご注意ください。 今も素人にちょびっっっとだけ毛が生えた程度ですが、 少しだけわかるようになりました。 毛の生えた私からツルツルの私へのダメだし Webデザイナーなりたてのころ、デザインのチェックをしてもらったとき、 「んーーーなんかこのへん素人っぽいね」と言われた事があります。 素人っぽい。。。？？？(゜д゜) そのときは何だろう、どんなのが素人っぽいんだろうとわかりませんでした。 就職はできたものの、技術は完全ど素人なので。 今も素人にちょびっっっとだけ毛が生えた程度ですが、 少しだけわかるようになりました。 「素人っぽい」の意味が。 毎日、たっくさんのWebサイトを見ますが、プロのデザイナーが作ったと思われる、構成もデザインもしっかりしたサイトもあれば、お店の人が一生懸命手作りしてそうなサイ
オハヨウからオヤスミまで。ディレクターの鮫島です。 今回から全3回にわけて「ワイヤーフレーム」の考え方や書き方などをお届けいたします。 第1回となる今回は、ワイヤーフレームの役割や考え方など思想的な部分をお伝えします。 第2回はワイヤーフレームの作成前に準備するべきことなどをお伝えし、第3回は実際にどう書いたらいいか、などをお送りする予定です。 ワイヤーフレームの書き方や考え方は人それぞれ微妙に違うかとは思いますが、私の考え方が少しでも何かの参考になれば嬉しいです。 ワイヤーフレームとは 簡単に言えば「何を・どこに・どのように」が記載された「サイト設計図面」です。 つまり、制作するウェブサイトの要素や機能、情報を設計図面のように配置しておき、お客様や制作者と認識を合わせるためのものです。 例えば家を建てるとき、設計図面がないと大工さんはパニックになりますよね。きっと。大工さんみんなの認識が
「忙しい日々の中で、毎月インスタでお客様に営業日を伝えるのが大変！」という方に朗報です。 インストール不要の、Instagramストーリーズで使えるシンプルでおしゃれな営業日カレンダー『marCalend（マーカレンド）』が爆誕しました。 ストーリーズやLINEなど、SNSで営業日や休業日を伝えることが多い美容師、ネイリスト、セラピストなどの皆さんにとって、その手間を簡単に解消できるツールです。 (さらに…) こんにちは！みぞれ（@xxmiz0rexx）です。 新年を迎えるとき、Instagramストーリーズで新年のご挨拶を投稿するお店は多いですよね。でも集客用にインスタを運営しているものの「パパッと使える素材が欲しい」「センス良い投稿にしたいけどデザインスキルに自信がない」という人も多いのではないでしょうか。 そこで今回は、簡単におしゃれな新年のご挨拶ストーリーズが作れる無料背景素材を1
Webサイト設計図 - ワイヤーフレームの作り方WebクリエイターボックスではWeb制作の応用技術をよく紹介していますが、基本の流れはちゃんと説明していないな…ということで、「連載！実践で学ぶWebサイト制作ガイド」として、実際に1つのサイトを作りながらWeb制作の流れと方法をまとめて書いてみることにしました。この連載企画はブログ開始当初に考えていましたが、2年半ほど忘れてました…。今回は「ワイヤーフレームの作り方」です。 実践で学ぶ Web サイト制作ガイド：その 3目標：わかりやすいワイヤーフレームを作成することができる必要なもの：紙とペン対象レベル：超初心者 OK！目次誰のため？何のため？Web サイトを作り始める前に。Web サイトの構成図を簡単に作れる便利ツールWeb サイト設計図 - ワイヤーフレームの作り方 ← 今ここPhotoshop で Web サイトのデザインをしようP
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く