Webデザインのスキルを磨こう！Webサイト模写のススメ
2014年8月17日 Photoshop, Webデザイン 先日、Webデザイナーになってもうすぐ2年がたつというMさんから、「どうすればデザインのスキルを磨くことができるのか？」という旨のご相談を頂きました。今回は彼女の相談メールでもふれられている、デザインのスキルアップに有効なWebサイトの模写のやり方について掘り下げてみようと思います！ ↑私が10年以上利用している会計ソフト！ 頂いたご相談メール 実は最近スランプぎみになっていて、サイトデザインを作成してもなぜかダサい、野暮ったいデザインになってしまいます。 デザインスキル向上させるために、いいデザインのサイトを模写するといいときいて模写もしてみたのですが、ぴったり一致するように作るのに意識がいってしまい、あまりデザインスキルが上がったと実感できないでいます。（模写したデザインを自分のオリジナルで活かせない） もし模写するときはどう
2013年のトレンド、フラットデザインを使うメリット+参考にしたいデザインまとめ | Goodpatch Blog
こんにちは！ 先月の頭に書いた記事「【2013年度版】今年流行る！7つのUIデザイントレンドまとめ」が 今でもかなり多くの方に読んでいただけているようでとても嬉しいです。今回のブログは「【2013年度版】今年流行る！7つのUIデザイントレンドまとめ」でご紹介した「メトロUI（フラットデザイン）」にフォーカスした記事です。 （下記はDesignmodoの記事「Flat Design: Can You Benefit from the Trend?」の翻訳です） 最近よくフラットデザインが取り入れられているWebサイトやアプリを見かけます。このトレンドはWindows 8とGoogleの新デザインがリリースされた事で人気になり、他のサイトなどでも取り入れられ始めました。デザインの装飾をたくさん使わず、フラットデザインはメッセージや製品、アイデアをユーザーに伝えるシンプルな方法です。ぜひ今のトレ
「Webサイトの配色で困った！」→「HUE/360使えば良いじゃない」
Webサイト制作で避けて通れない配色の決定。芸術的素養が絶望的にないのでいつも泣いてるゴロドクさんです、どうも。 所詮素人には理論に基づいた配色など無理ゲーです。先日もちょっとしたデザイン的なゴニョゴニョという場面に出くわしましていつものように悩みつつ、なんか配色決定のためのWebサービスないかなーと思って探してたらこういうのを見つけました。 webでの色指定は基本的にRGB値での指定となりますがこれって光の三原色の混色なんですよね。 実際にCSSなんかで数値いじりつつデザインしてると「なんか違うなー」というときにもっと明るくしようとか、もっと彩度上げようってのが感覚的にどの数値をどんだけいじって良いのかってわからないんですよ。 RGB値直接いじって彩度上げようと思ったらくすんじゃった上に色みかわっちゃってオヤオヤ残念なんて日常茶飯事ですよ（いやそのまえにフォトショなりなんなりでデザインカ
おしゃれなサイトで、気持ちを切り替えたいときに【20選】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちははじめまして、つい先日LIGに入社したあゆみです。 気づけば早くも3月も一週間が過ぎ・・・ということで、今日も思いの他ぬくぬくしていますね。ぽかぽか。 そんなわけで早速、気持ちを切り替えたくなるこの季節に触れておきたい、見た目も素敵なおっしゃれーな情報が載っているWEBサイトをいろんなジャンルから抜粋して紹介します。（おしゃれって言うのすごくこっぱずかしい） オシャレな情報盛りだくさんのWEBサイト20選 1. WIRED スタートはWIREDで。ガジェット系が強いので、LIGのブログを読んでいる方のなかにも読者という方、多いんじゃないでしょうか。雑誌も毎回切り口が思わず「いいね！」と言ってしまうような、いい目線で特集が組まれているのですが、WEBの情報量も半端ないです。毎回頭よくなった気分にさせてくれます。 2. THE PUBLIC 気になる情報やクリエイターの話を、渋谷の2
「第一回 プログラマ向けデザイン勉強会」の内容を参考にして妻のパン屋のWebサイトをリニューアルしてみた - give IT a try
はじめに みなさん、明けましておめでとうございます！・・・と言うにはあまりにも遅すぎる時期になって2013年最初のブログ更新となりました。 「そろそろブログ書かなきゃ書かなきゃ〜！」と思っていたのですが、年末から妻のパン屋のWebサイトのリニューアルに没頭してしまい、間が空いてしまいました。 せっかくなので、2013年最初のエントリではそのお話をしたいと思います。 「第一回 プログラマ向けデザイン勉強会」の発表資料が素晴らしい！ 前々から妻からは「Webサイトのデザインをリニューアルしてほしい」と言われていたのですが、僕自身はあまりデザイン方面には強くないプログラマなので、どうしようかと困っていました。 そんなとき、ネットで見つけたのが「第一回 プログラマ向けデザイン勉強会」でした。 東京の勉強会なので、僕は参加できませんでしたが、発表者の方々のわかりやすいスライドが公開されていたので、だ
Webサイトの作り方のまとめ！トップページ完成まで。
サンプルサイトの制作を通して、「Webサイトのコーディング」についてまとめた、第3（+α）回めです。 トップページにツイートを表示したり、Like Boxを設置したり、JavaScriptでいろいろ実装したり、その他もろもろ。 「Lopan cafeというWebサイトのトップページ総仕上げ」について、制作過程をまとめました。 以下目次。 その前に、ちょっと修正 一番上のナビゲーションのところ Lopan's infoと新作パン／おすすめパンのところ 「画面を縮めると変」だったところ ちょっと脇道：サーバーの話 Webサーバーとは サーバーにファイルをアップロードする トップページにツイートを表示する。 Twitter ウィジェット Embedded Timelines（埋め込みタイムライン） トップページにLike Boxを表示する。 Facebookページを作る Like Boxを設置す
Basic Process to Apply CSS to Your Website
2014年8月17日 CSS, Webサイト制作 CSSでレイアウトを組むのは、最初はすごく難しく感じるかもしれません。私も何度も挫折しかけました。。でもよく使うプロパティを理解し、少しずつ組み立てていくと自然と慣れてきますよ！今回はサンプルファイルも用意したので、ダウンロードしてコードをじっくり見てやってください。連載企画「実践で学ぶWebサイト制作ガイド」、CSSでラストスパートです！ ↑私が10年以上利用している会計ソフト！ 実践で学ぶWebサイト制作ガイド：その7 目標：CSSでレイアウトが組める・基本的な装飾ができる 必要なもの：Windows メモ帳 や、Mac OS Text Editなどの文章エディタツール。もちろんAdobe DreamweaverなどのWeb系オーサリングソフトがあるならそれでOK 対象レベル：CSSの基礎知識がある・基本的なCSSが手打ちで書ける 目次
優れたユーザビリティを実現する25の基本概念
LVMH Watch & Jewelry PR&AD Manager/Assistant Manager/Specialist
Dwの可変グリッドレイアウトを使ってブログを構築した際に気をつけた事など - すしぱくの楽しければいいのです。
公開日：2012年9月20日 カテゴリ：Web制作に役立つネタ うちのブログを デスクトップPC・タブレット・スマートフォン のブラウザサイズごと最適化して表示させるレスポンシブウェブデザイン（以下RWD)にリニューアルしました。「どうやって作ったのか教えてほしい」など、数人からリプライをもらいまして、使用したDreamWeaverCS6の可変グリッドレイアウトについて、気をつけた点などを備忘録ついでに書いてみましたよ。 流行りに乗り構築したので不安もありましたが、PV数+広告収入は上昇しており個人的には「導入してよかったぁ」っと満足してます。 DreamWeaverの可変グリッド 今回、DWの可変グリッドレイアウトを利用してRWDサイトを構築しようと思うわけですが、作る前の読み物として Web制作者は知っておきたいwebサイトのレイアウト7選 │ Design Spice ヒロさんが解説
色彩センスのない人がそれなりのWebサイトを作るための秘訣3つ | 高橋文樹.com | デザイン
この投稿は 11年 前に公開されました。いまではもう無効になった内容を含んでいるかもしれないことをご了承ください。 前回の記事に続き、僕と同じくデザイン力のない人のためのサバイブハウツーです。Webサイトを作っていると、デザインをしなくてはならないのですが、その際にとても困るのが色の決定です。 色使いというのはとても大事なもので、「ダサいなー」と思われる理由のトップクラスに位置するものです。デザインというのは上手くいっている場合は気づかれず、失敗したときに目立ちます。 みんな大好き愛生会病院 僕はいままで某大手企業の研修や某デジハリなどで沢山の初心者を見てきましたが、確実に言えることは99%の人に色彩センスはないということです。「好きな色決めてね」というと、99%の人がクソのような色を使ってきます。これは当人がダサいかダサくないかにかかわらず、99%色彩センスがありません。 Webで色彩セ
WordPressで作られている、有名Webサイト１１選
先日更新したWordpressインストールのエントリーを多くの方見ていただき、実際にWordpressを始めたという声を頂いた。最初は苦労すると思うのだが、是非自分だけのブログやWebサイトを作ってもらえたらと思う。 今回はWordpressで作られている、有名Webサイトを１１個取り上げていきたいと思う。自分のブログやWebサイトを作っていく上で、参考になれば嬉しい。 １．WIRED.JP http://wired.jp/ ２．AdverTimes http://www.advertimes.com/ ３．ガジェット通信 http://getnews.jp/ ４．Greenz.jp http://greenz.jp/ ５．WSJ.com http://jp.wsj.com/japanrealtime/ ６． 日刊SPA http://nikkan-spa.jp/ ７．TechCrunch
Webデザイナー（私）によるWeb制作のときに気をつけてることや制作フローとかいろいろ
私はフリーランスの Web デザイナーとして、クライアントさんの Web サイトを作成するお手伝いをさせていただいています。今回は、私が仕事でデザインするときに気をつけている事や、Web 制作のフローをまとめてみました ...。 Webサイトを作るとき、みなさんはどんな制作フローをたどって作ってますか？私はフリーランスで仕事をしていて、最初から最後までひとりで作ることが多いです。今回はふだんデザインする時に気をつけてる事や、いつもしている Webサイトの作成フローをまとめてみました。もっと効率化できることがあるはずだなーと思いつつ、最初から最後までを書いてみました。 また、Webデザイナーってどんな仕事なのっていう質問をときどきいただくので … こんなことしてます … みたいな紹介です。これはあくまで私が Webサイトを作る時にしているフローで、他の Webデザイナーさんや制作会社さんと違
配色パターンからWebデザインを考える
2017年6月29日 Webデザイン, 色彩 ページを開いた瞬間にそのWebサイトのイメージを左右するほど重要な要素「色」。しかし色の組み合わせ、配色には無限のパターンがあり、正しい配色を見つけるのは簡単なことではありません。ここでは色彩の基礎と配色パターンの見つけ方の一例を紹介します。 ↑私が10年以上利用している会計ソフト！ まずは色彩の三属性について 色は彩度・明度・色相の三属性（三要素とも呼ぶ）から成り立っています。 彩度 色の鮮やかさの度合いを表します。彩度の高い色は派手・華やか・目立つ色といえます。子供服やキャラクターグッズ関連のサイトには彩度の高い色が使われることが多いです。逆に彩度の低い色は地味・おだやか・上品であるといえるでしょう。和食・ヴィンテージ風デザインのサイトには彩度の低い色がよく使われます。 明度 色の明るさの度合いを表します。明度が高い＝明るい色はさわやかで爽
デザインの要素と原則
2017年6月29日 Webデザイン 今回はデザインの基礎をお勉強しましょう！デザインは複数の要素（エレメント）と原則（プリンシプル）から成り立っています。それらを簡単に説明するとともに、要素と原則を生かしたWebサイトを一諸に紹介します。私は「デザインセンスは才能」とは考えていません。デザインセンスはそれらの要素をどう組み合わせるか、という閃きとその引き出しの多さによるものだと思います。ぜひ参考にしてみてください！ ↑私が10年以上利用している会計ソフト！ デザインの要素（エレメント）と原則（プリンシプル）は全てのビジュアルデザインの基礎と言われています。要素はデザインの「表現手段」を形成し、原則は「構造的特徴」を構成します。デザインにおける要素と原則の認識は、視覚構成をすることにおいての最初のステップ。Webデザイン、グラフィックデザイン、プロダクトデザインなど、すべてのビジュアルデザ
同色系でまとまりのある配色、WebデザインにするためのTips
いろいろな色相を使わずに、ひとつの色相の彩度違い、明度違いなどでデザインしていく同系色デザイン。 多くの色相を使わない同色系デザインは、たくさんの Webサイトでも使われている人気の配色です。 同色系でデザインしていくと、ページの統一感がでて色の持つ力を印象付け易いというメリットがあるだけでなく、初心者でも比較的まとめやすい ... という作り手側のメリットもありますね！ 同色系でまとめられたデザインは、ページに統一感があって、よくまとまって見えますよね。そして色の持つメッセージを、強く印象付けるのにとっても効果的だと思います。いろいろな色相を使ったデザインに比べて、比較的まとめ易いし、色的な効果を発揮しやすい同色系デザイン。同色系は簡単 … というか、カラフルデザインに比べれば簡単かもですけど、配色における基本的なポイントは、他の配色方法にも通じています。今日は基本的なところを押さえなが
「Webサイトにデザインなんて関係ねー」と言う人に一言。Webデザインの重要性とは？
2017年7月14日 Webデザイン マーケティング専門の人が「Webサイトにデザインなんて関係ないぜ！すべてはプロモーションとコンテンツ次第なんだぜ！」と豪語していたのでそれに反論を。もちろん彼の言っている事はWebサイトを世に広めるためにはとても大切な要素です。でもだからといってデザインが全く関係ないというのは極論すぎます。という事でWebデザインの重要性について考えてみたいと思います。 ↑私が10年以上利用している会計ソフト！ なぜWebデザインは重要なのか？ 以前「ECサイトの色やデザインと購買意欲の関係」という記事で触れたとおり、ECサイトにおける約半数のオンライン消費者が、全体のデザインを理由にそのサイトを再訪問しないようです。この結果から、多くのユーザーがWebサイト上のデザインを重要視している事がわかります。では具体的にWebデザインはどのような役割があるのでしょうか？ ユ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://nh-lab.com/traditional-china-web-design/
Twitter Bootstrapで作られた、秀逸なデザインのWebサイト集
手書き風だけどリアルなソーシャルメディアアイコンセット１５:phpspot開発日誌
神がかり的な素晴らしいデザインのアイコン - Incredible Icon Design -
