デザイン向けふきだし素材を配布するサイト
HTML+CSS+JavaScriptでつくるサイトの定番演出「高級ペライチ」! HTMLファイ部の「HTML5の鬼」ことほんだです。 カヤック社内では「高級ペライチ」という愛称で呼んでいる縦や横に長い1ページサイト。 スクロールに合わせたパララックスやアニメーションの演出が印象的ですよね。 今回は「高級ペライチ」とググると1位に表示される、 僕のはてブ「高級ペライチ」タグから厳選32サイトを紹介します! まずは王道!縦に長い高級ペライチ
このブログは、僕がこれまでWebサービスをいくつか作ってきて、失敗したり成功したり色々体験していることをまとめています。 前回の「シリコンバレーで聞いたデザインが美しいWebサービス/アプリ15選」の第二弾ということで、こちらで聞いた美しいWebサービスやアプリを紹介してみたいと思います。 Airtime https://www.airtime.com/ 先ごろローンチされたばかりの新しいプロダクト。Napsterの共同創業者ショーン・パーカーとショーン・ファニングが再びコンビを組んで作られたビデオチャットサービスです。トップページの未来的なイラストも目を引きますが、ログイン後のチャット画面は、一瞬ブラウザであることを忘れさせるほどの見栄えがします。 Pose http://pose.com/ ファッション関連サービスなので、当然デザインもハイクオリティ。アプリに入って行くと、素敵なWel
ウェブのインターフェイスだけでなく、現実の世界でもたくさんの角丸を目にします。角丸は一時のトレンドではなく、デザインのスタンダードと言ってもよいでしょう。 そんな角丸がなぜ好まれるのか、どう使えばよいのか、ウェブページにどのように実装するのかなどを紹介します。 Rounded Corners and Why They Are Here to Stay 下記は各ポイントを意訳したものです。 角丸は目に、そして脳に優しい< 角丸のイメージは安心 -Appleのこだわり 角丸はいつ使用するべきか 角丸の実装:CSS3< 角丸の実装:古い方法 終わりに 角丸は目に、そして脳に優しい ビジュアル認知の権威:Jürg Nänni教授によると、『鋭角の長方形は同じ大きさの楕円より認知するのに努力を必要とする。人間の目は円形のものをより速く捉えることができる。」と述べています。 鋭角と角丸の視線の流れ 鋭
こういうのを集めだすときりがないのですが、個人的に本当によくお世話になっているサイトに絞って紹介してみます。 有名なサイトばかりですがサイトを作るにあたってお世話になる順に紹介していきます。参考になればうれしいです。 Webデザインギャラリー | I/O 3000 まず、ギャラリーサイトでサイトのイメージを膨らませます。カテゴリ、タグ、カラーで整理されており、とても探しやすいです。 このようなギャラリーサイトは他にもありますが、ページ変遷なしで次を読み込むのでとても見やすいです。 他にはこんなサイトをよく見ます。 WEBデザインの見本帳 Web Design Clip 【Webデザインクリップ】 【HTMLタグの簡単検索】TAG index - ホームページ作成情報 プロの方はPhotoshopで描いてからコードを書いていくみたいですが、私は最初からHTMLを書いていきます。 一応Drea
ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. WEBサイトのデザインは、誰もが頭を悩ませる部分だ。 「どういう配色なら良い印象を持ってもらうことができるのか?」「どのレイアウトならコンバージョンが上がるのか?」など、様々なところまで考えを張り巡らさなければいけないからだ。 そこで本日は、The Art of Color Coordination というインフォグラフィックをご紹介する。これを見れば、WEB配色の基本の2大原理と、今すぐに使える6つの配色パターンがすぐに分かる。 そして、初心者でも、統一感のある配色のWEBサイトを作るための大きな助けとなるはずだ。 WEB配色の2大原理と6つの配色パターン画像を拡大して表示する ※追記:インフォグラフィックの最後のクレジットの部分が途切
先日、UIデザインが素晴らしい35のウェブスタートアップという記事が人気となりました。今回はあんな今風のウェブUIを気軽に簡単にデザインしてみたい!という方のためにフォトショップ用のUIエレメントのファイル集を32厳選してご紹介。どれもフォトショップ形式、かつベーシックなまさに今風にデザインされた要素ばかりなので、便利に使えそうです。 — SEO Japan Butterscotch UI Kit Lion OSX UI Kit PSD Calendar PSD Search Drop-down PSD Volume Slider Mini Web UI Set Cloudy UI kit Dark UI Kit Modern UI Kit UI Bundle Detailed UI Kit iTunes Inspired UI Kit (PSD) iPad Application Moc
Webサイト制作の一連の流れをまとめてみました。クライアント向けにまとめたものを少し手直ししてのせています。新人Web担当者さんや、新人ディレクターさんの参考になるかなと。 なるべく難しい言葉を使わず、理解しやすいよう平易な言葉で書いております。 ※流れや手順は制作会社によって違うのですが、概要はつかめるかなと思います。 目次と流れ 1. サイトのコンセプトを考える 2. 競合他社からクライアントのお店や商品を選んでもらうためのポイント(強み)を整理する 3. そのサイトで一番伝えたい内容を決める 4. お客さんが必要とする3以外の情報や、クライアントの伝えたい情報をまとめる 5. サイト更新は誰がするのかを決める 6. 想定使用デバイス(PCやスマートフォンなど)を決める 7. サイトの周知・宣伝方法を考える 8. ページの設計図をつくる 9. サイト制作にかかわる必要な素材を準備する
フォトショップでは様々な切抜きの方法があり、パスを使って切り抜くことが多いですが、髪の毛を切り抜く際、先端部分をパスで綺麗に切り抜くことは至難の業です。そんな時「チャンネル」を利用して切り抜きを行えば、髪の毛部分も自然な形で切り抜くことが出来ます。 「チャンネル」を利用して髪の毛を自然な形で切り抜く方法 パスでおおよその輪郭を選択します 「ペンツール」を選択し、パスパレットよりパスを新規作成します。おおよその輪郭のパスをとっていきます。ポイントは、髪の毛の部分は内側にパスをとることです。 髪の毛部分をなげなわツールで選択します 「なげなわツール」より髪の毛の先端部分を囲んでいきます。ある程度適当でかまいません。 なげなわツールで選択範囲が取れれば、Ctrl+Jを押してみます(今選択した部分のみコピーされ新規レイヤーに追加されます。) 「チャンネル」での処理 現状レイヤーには、基画像と、手順
レスポンシブデザイン、パララックススクローリング、そういったレイアウトに関する変化に伴い、サイト内を誘導するナビゲーションの種類も多様化してきていますね。 元々、縦、横、ドロップダウン、固定、メガメニュー等、サイトの構造によって様々なナビゲーションを提案してきたわけですが、最近サイトのレイアウトを考える時、話に上がるナビゲーションの呼び方とか、種類とか、大量多量過ぎてもう分け分けらなくなってきたので、ちょっと僕自身の復習と、参考サイトやらチュートリアルやらないかを全部まとめてしまいたかったので、僕と、僕の周りのデザイナーさん達の役にたてるよう、今回記事にさせてもらうことにしました! 実際にWEB制作に携わる中で、聞いたことのある物を分類させて頂くので、僕の勝手な分け方になってしまい申し訳ない限りなんですが、何かナビゲーションやレイアウトに悩んだ時にでも参考か何かにしていただければ嬉しい限り
良いデザインって?技術を学ぶ前に知っておきたいデ... / Webサイト制作において、私なりの色選定の考え方... / ヴィジュアル要素の表現方法 | Arch他...全10件
まれにWebサイトを設計する上で、意外と軽視されがちというか、深く考えずにずらずらとコンテンツが横並びされるパーツ。それが『メニューバー』です。今朝色々と見て回っていたら、あぁ確かにと思った記事があったので、今回はメニューバーに焦点を当ててみようかと。 メニューバーの2つの役割 Important Elements of a Successful Web Page Design (成功したWebページデザインの重要な要素) この記事をみてはっと昔を思い出した訳です。 10年前にさかのぼると、私も結構いい加減な仕事をしていた時期がありました。 というのも、私のWeb制作は全て独学であり、学校ではCADを教わったくらいで・・・。 WindowsPCを買ったのは18歳で、そこからネットにはまり、本屋をあさって学んだ訳です。そのころのネット接続といえば従量制だったので、ネットで気軽に調べるなんて事
以前私は、デザインの勉強を一切したことの無いデザイナー志望の新入社員に、webデザインを教える教育係を任されたことがあります。 教育なんて簡単なんじゃないの?と安易に考えた私は、案の定痛い目を見たわけです。この日から1ヶ月間、私は毎日3時間残業する羽目になってしまいました。 人に教えるのは意外と難しく、何から教えたら良いのかすらわかりませんでした。ただやはり最初なんで基本が大事だろうと思い、先輩達のアドバイスを受けながら、【デザインの基本原則】を教えることになったわけです! 今まさに新人教育に困っている人がいれば、まずこの記事を読んでもらって見てください!新人デザイナーに教える手間が1.2時間はぶけるかもしれません!(記事がわかりにくければ読ませないでください。その時はごめんなさい) では、早速本題に入りたいと思いますが、まずは私が新人デザイナーに初めに教えることにした【レイアウトデザイン
初めまして、@poyosiです、こんにちは。 Webデザインなどで壁紙を作る際に便利そうなテクスチャを100枚作りました。 このブログの制作や、他Webサイト制作でノイズがかった背景や、ちょっと変わった背景が必要だったので自分用にちょっとした加工で簡単に背景が作れるテクスチャを色々用意しました。 大きめの画像にしたので、Webサイトの背景などで繰り返し(リピート)使用しても繰り返し部分が目立たなくなるようになっています。個人利用可、商用利用可なので、もしよろしければWebサイトの背景やバナーの背景を作るときに自由に使ってみてください。 テクスチャ一覧 Photoshopでテクスチャを使ってみよう 1:パターンを登録しましょう。 パターンに登録したいテクスチャ画像をPhotoshopで開きます。 「編集」 > 「パターンを定義」からパターンを登録します。 2:背景画像を作ってみましょう。 新
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く