整理され、シンプルで、使い勝手が良い。メトロスタイル(カードスタイル)は、すべてのメインコンテンツが配置されたセクション(カード)を使ってサイト構造を構築するという原則に基づいています。
![ホーム - ウェブパッケージ](https://cdn-ak-scissors.b.st-hatena.com/image/square/b2f6c8a1ac29f43f1775cf068272b508a974bd6e/height=288;version=1;width=512/https%3A%2F%2Fwww.web-package.net%2Fwp-content%2Fuploads%2F2020%2F11%2F900x1190.png)
色んな Webサイトを見ていると、1px にこだわって作られたキレイなデザインがたくさんあります。私は Photoshop を使っているので、Photoshop のレイヤースタイルを使って、1px の細かい所を作る Tips をまとめてみました。基本的な操作ばかりなので、これから Photoshop で Webデザインをやってみたいなーという人向けの記事です。 色んな素敵なデザインの Webサイトを観察していると、1px の細かいところまでこだわって作られてるデザインってとても多いですよね。1px … Webデザインでは一番小さいサイズ。「神は細部に宿る」という言葉もあるけれど、1px までしっかり作られたグラフィックはとても美しいですね! 今回は Photoshop を使って、いろんな 1px を作ってみました。とは言っても難しいグラフィックデザインを作るわけではなくて、レイヤースタイル
本日から新たに、「Webデザイン入門」というタイトルで連載を始めます。 9月からWebスクールの講師をさせていただいているのですが、そこでカリキュラムとして渡されたテキストには「Photoshop や Dreamweaver 等のソフトの操作説明」しかされておらず、ソフトの操作方法を習得しただけではWebデザイナーとして就職し、仕事していくのは少々厳しいのではないかと思いました。 そこで、ソフトの操作方法と平行して「Webデザインそのもの」について考える時間を設けたいと思い、オリジナルのカリキュラムを作ることにしました。 ここでは、そのカリキュラムの一部をブログ形式にして掲載しています。 既にWebデザインの仕事をされている方はご存知のことばかりかもしれませんが、これからWebデザイナーになりたい方や、今はプログラミングなどデザイン以外の仕事をされていて、これからデザインも手がけてみたいと
エレメント同士を水平に配置したり、垂直に配置したり、またそれが対称だったり非対称だったりなど、ウェブデザインでヴィジュアルのバランスを実現する5つの方法とバランスに大きな影響を与える5つの要素を紹介します。 Developing Balance in Web Design [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに バランスの5つのタイプ バランスの5つのプロパティ はじめに もしあなたのウェブサイトのデザインがヴィジュアル的にバランスがとれていないなら、あなたのサイトは混乱に陥っているようにユーザーは感じるものです。そして、心地悪く感じさせるでしょう。 あなたのデザインは魅力的であり、ユーザーにリラックスして見回してもらえるようにするべきです。それを達成する最も良い方法はヴィジュアルのバランスです。 ヴィジュアルのバランスとは、デザインエレメントのバランスをとるだ
株式会社8bitのスタッフブログです。こんにちは。株式会社8bitの高本です。 よくWebデザインをクライアントに提出すると、現場レベル(制作会社や代理店)ではOKだったものがお客さん(エンドクライアント)にとってはNGだったりします。 「ええ!そんなことしたらせっかくのデザインが台無しになっちゃう!」 という経験を持つデザイナーさんも少なくはないのでしょうか? ですが、デザインが分かっていない!ありえない!とばっさり切らないで考えてみることも大切です。 実際に利用する人のほとんどはデザインが分かる人(デザイナー?)ではないので、その方々のご意見を受け入れて満足されるものをつくるのもプロだと思います。 お客さんに指摘をされる部分は読みやすさ、見やすさなど、いたってシンプルな部分だったします。 (大抵のお客さんは最初のイメージをそぐわないものでなければ、デザインテイストがどうと
レスポンシブwebデザインからグリッドデザインまでよく使われているwebデザインのレイアウト用語をまとめました。 レスポンシブwebデザイン エラスティックレイアウト リキッドレイアウト フレキシブルレイアウト 固定幅レイアウト グリッドレイアウト 可変グリッドレイアウト レスポンシブwebデザイン(Responsive Web Design) PCやスマートフォン、タブレット事に複数のデザインを制作するのではなく、 ディスプレイの幅に合わせてデザインを最適化する方法。 CSS3のMedia Queriesを利用してディスプレイサイズに応じてデザインを変更します。 メリット 一つのソースで複数デバイスに対応できるのでメンテナンスが容易です。 また今後デバイスの種類が増えてもそれに対応できます。 それぞれのデバイスに合わせた形で調整できるのでユーザーエクスペリエンスも高くなります。 デメリッ
2011年 08月 29日 ブログを運営している上でインストールしている全プラグイン20個 [WordPress] カテゴリ: WordPress タグ:WordPressWordPressプラグイン ブログをリニューアルしました。それに伴ってプラグインを整理したのですが、「ん?これなんだっけ?」ってのが結構あったので、後々の事考えてインストールしているプラグインを書き留めておきます。結構便利なものも多いので今からwordpressをやろうと考えてる人には役に立つかと思います。 尚、紹介する順番はアルファベット順となっております。(管理画面がアルファベット順な為) Akismet http://wpdocs.sourceforge.jp/プラグイン/Akismet コメント内容をチェックするスパム対策プラグインです。結構な数のスパムコメントが入ってくるので重宝しています。 Another
2017年7月14日 Webデザイン, インスピレーション 先週末、ぼけーっと世界各国のWeb制作会社のWebサイトをひたすら眺めていました。デザイン・Web制作会社のWebサイトって細かいところまで気をきかせていたり、クスッと笑ってしまうような仕掛けがあったりして、見ていて飽きないんですよね。さらにそのサイトだけでなく、彼らの作る作品も素敵なものが揃っているという点もおもしろいです。そんなWeb制作会社のWebサイトと、その見どころを紹介します! ↑私が10年以上利用している会計ソフト! Web制作会社のサイトの特徴 Web制作会社のポートフォリオサイトを眺めていて、いくつか発見があったのでまとめてみます。 制作実績 多くの会社がjQueryなどを使って動きをつけて作品を紹介していました。また、以下の情報を載せているサイトが多かったです。 スクリーンショット クライアント名 制作したサイ
※煮詰まる× → 行き詰る○ なんかおもいっっきり日本語間違って使ってました。めっちゃごめんなさい>< 更新が滞るとEvernote開いて整理整頓ついでに記事を書くのが日課になってしまったセナですこんにちは。 さて、数年WEB屋やってると、自分の作るものが単調になったなと思うことがたまにあります。WEBでも紙でも制作技術を学んでいた時はいろんなサイトを見て見まくって、「どうしてこんなに見やすいんだろう。」とか、「どうしてこんなに分かりやすいんだろう。」とか。そんなことを感じては、常に目にする物から何かを吸収しようと躍起になっていたものです。 何かを見る度、知る度に確実に何かを学んでいったあの感覚は、何時になっても忘れてはならないものだと常々思います。 アイデアに詰まっていたり、物づくりへの刺激が欲しい時なんかに見ると、やる気とかが舞い降りてくるかもしれません。 Dribbble クリエイタ
まとめって、なんか流行に乗ってる感じがしてあまりやる気がしなかったのですが、そもそもこのブログは色々試してSEOを伸ばせるかの検証も行っているので、逆にやるべきなんじゃ?と思い着手することにしました。 今回まとめたのは女性向けデザインのサイトをまとめた物。そもそも女性向け、男性向けって漠然としてデザインが違う!っていう考えがあっても、じゃあ具体的に何がどう違うの?という部分から検証してみました。 製作する上で重要なポイント まず、第一に男性と女性で大きく違う部分が、サイトの使い方です。これは視覚的な問題、感覚的な問題以前の潜在的な部分になるとでも言いましょうか・・・。 そもそもサイトを使うとき、男性は知りたいことがそのサイトに掲載されているかを調べるのにまず「検索」を利用します。第一歩が検索かどうかは別として、「検索を使おう」という意識があります。 それに対し女性の場合は、そのサイトにどう
お使いのブラウザではご覧いただけません お手数ですが、最新の対応ブラウザ(Chrome/Edge/Firefox/Safari)にて再度ご覧ください。
どうしてもお金を借りたいけれどもどんな消費者金融に申し込んだらよいのか全然わからない…迷ってしまって不安がある…そんな愛媛在住の人たちは必見です!このサイトは愛媛県在住の方のために優良な消費者金融を紹介しています!ぜひ参考にしてみてください。困ったら絶対アクセス
ウェブデザインをワンランクアップさせる、リアリスティックなユーザインターフェイスエレメントをPhotoshopで作成するポイントを紹介します。 Crafting Subtle & Realistic User Interfaces [ad#ad-2] 少し古い記事ですが、現在でも役立つ情報なのでご紹介。 下記は各ポイントを意訳したものです。 オブジェクトを想像する 光沢 vs つや消し 制作に役立つTips リアリティは繊細に オブジェクトを想像する リアリスティックなUIエレメントを設計する時には、そのオブジェクトが実世界でどのように見えるか想像する必要があります。それを実現する一番簡単な方法は、そのオブジェクトをモニターの横からどのように見えるか想像することです。 これは最近のウェブデザインでもよく見かける微妙な凸型のパネルで、その外周には小さいエッジを持っています。光源は上部にあり、
Netontwerp 正方形のグリッドが特徴的なウェブサイトで、ナビゲーションは真ん中に配置されています。サイトは1ページで構成されており、ナビゲーションのラベルをクリックするとスライドのアニメーションでコンテンツが表示されます。 ナビゲーションは各コンテンツに溶け込むようにデザインされており、こういった使い方は小さいサイトには素晴らしいソリューションとなるでしょう。 Black Estate Vineyard このサイトも1ページで構成されたもので、半透明な背景を使用したナビゲーションが配置されています。各コンテンツは半透明のナビゲーションの後ろにスクロール表示され、ユーザーは迷うことがないでしょう。 半透明の背景を使用する一番の利点は、さまざまなビューポートのサイズでも不具合が生じないことです。
TOP > WebDesign > オレンジ色を効果的に利用したwebデザイン「Examples of Orange in Web Design」 テーマカラーを取り入れることで、より印象的なwebサイトに仕上げることができると思います。今回紹介する「Examples of Orange in Web Design」は、オレンジ色を効果的に利用したwebデザイン集です。 オレンジ色といってもさまざまなカラーバリエーションがあり、サイトのテイストやイメージに合わせて上手に使い分けられています。気になったwebサイトをいくつかピックアップしました。下記よりご覧ください。 詳しくは以下 ■TEDxToronto 2011 Conference | Ideas Worth Spreading ポイントカラーとしてビビットなオレンジ色が使用されています。シンプルなデザインの中に映えるカラーの
今や家庭用ゲーム機以外でのゲームと言えば、iphoneを代表とするスマートフォンのアプリや、Facebook・mixi・Gree・Mobageに代表されるようなソーシャルゲームが中心となり「早い・安い・面白い」のカジュアル化が進んでいますが、初めてパソコンでゲームをしたのはクライアント型のMMOでしたという人も多いのではないでしょうか。 数年前から廃人(1日の大半をゲームに費やせる人)が絶対的に強いゲームから、短時間でも楽しめるものが主流になってるようですが、それに対するMMORPGの1つの答えが基本無料でアイテム課金なんでしょうね。社会人は強さをお金で買ってね的な。 今はネトゲはやらなくなったけど、ウルティマやディアブロ(ちょっと違うか)でネトゲの面白さを知りましたという諸兄もそう少なくはないと思います。(歳がばれますね) 僕も学生の頃はMMOをプレイしていたのですが、プレイ当時はまだま
ファブリック素材の拡大キャプチャ ダウンロードできるはPhotoshopのパターン素材には、9種類のパターンがあります。
このシリーズでは Web Design101(WD101)と名付けて、ウェブデザインをより深く理解するための最初の一歩になる知識やノウハウをコラム形式で紹介していきます。 DTPという名の足かせ Webデザインはよくも悪くも DTP のノウハウを受け継ぎながら徐々に成長してきた領域です。今でも根強く残っている「ページ」という概念。タイポグラフィ・グラフィック・レイアウトなど DTP が培ってきたノウハウは CSS と HTML (ときどき JavaScript)を使って再現されたりしています。DTPの概念とノウハウがなければ Dreamweaver のようなソフトは生まれなかったでしょうし、Dreamweaver のようにコードを手打ちしなくても DTP 感覚で Web デザインに入り込めるソフトがなければ、Web デザイナーを職業とする方もこれほど増えなかったかもしれません。 しかし、D
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く