ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。
リッチに見せるデザインテクニック。美しいぼかしで魅せる 『MAX 塗り』のすすめ。
こんにちは、イメージ担当の長谷川です。 今回は 1px にこだわったリッチな Web や UI デザインを更に立体的で奥行きのある雰囲気にする『MAX 塗り』を取り入れたグラフィック作成手法をご紹介します。 ところで『MAX 塗り』ってご存知ですか？ガンプラなどが好きな方はピンと来たと思いますが、プラモデルなどに興味がない人は全く分かりませんね。 『MAX 塗り』とはプラモデルに立体感を出すためにエッジから中央に向かってぼかしていく、昔からある「ぼかし塗り」や「グラデーション塗り」の技法です。 この技法で塗装されたプラモデルは単純に塗装したものより格段に迫力や存在感が上がります。プロモデラーの MAX 渡辺さんが良く使うプラモデルの塗装技術として通称『MAX 塗り』と呼ばれています。 Web や UI にこの『MAX 塗り』を取り入れる方法は簡単です。 作ったボタンや背景などのグラフィック
nanapiのデザインプロセス（その１） - エスカフラーチェLLC
9/1にロケットスタートからリリースされたサイト「nanapi [ナナピ] - みんなで作る暮らしのレシピ -」でのサイトデザインを担当させていただきました。 制作過程みたいなものを書いてみたいと思います。 ロケットスタートに全力投球を誓った、けんすうさんからのご依頼 ある日、ロケットスタートの社長、けんすうこと古川健介さん（以下、けんすうさん）から ：HOWTOサイトをつくりたいからデザインを依頼したい！ ということで早速じっくりとお話を伺うことにしました。 ベンチャーだからこそできる！？合宿的制作スタイル 以前けんすうさんと一緒にお仕事させていただいたときに双方にとってよかったことがあります。 それは、デザインカンプができあがるまでのプロセスの段階で、短期間ながらじっくり直接やりとりする時間をつくる、ということでした。 宿泊こそ伴わないものの、合宿に似たようなスタイルです。 長い時
「nanapi」に学ぶウェブサイトのコンセプトデザイン｜blogs.com
はてブ 「nanapi」に学ぶウェブサイトのコンセプトデザイン delicious livedoor クリップ Tumblr Instapaper メールで送信 IT・Web デザイン・アート 2009.09.18 0 ウェブサイトをどう作っていくか、というノウハウがこんなに詰まった記事を公開しちゃっていいんですか？ と心配になるくらい、サイト作りのエッセンスが満載です。 "7分であなたの生活を便利にしちゃう ライフ共有レシピサイト"をコンセプトにした「nanapi（ナナピ）」のサイトデザインを手がけた、エスカフラーチェのpurprinさんのブログでは、よくある「デザインTips」ではなく、「どうやってたくさんの人に読んでもらえる魅力あるサイトを作るか」というコンセプトデザインについての考えがしっかりまとめられています。 具体的にデザインに落とし込むには、「サイトリリース時点でどうあるべき
スタイリッシュなフォームを作るときに見るべきエントリまとめ
Form Design フォームデザイン さてさて、最近のwebの入力フォームは本当に凝ってるところが多くて、ただただ関心するばかり。 そんなわけで今回は、焦点を『フォーム』に限定し、スタイル抜群なフォームUIを勉強してみたい。 流れ的には インスピレーションデザイン集CSSによるフォームの変更方法JavaScriptによるフォームデザインという感じでお送りいたします。 インスピレーション まずは、スタイリッシュなフォーム。 これらは、webデザイン全体がフォームデザインとなっているまとめです。 まさにバインダー。 webの入力フォームを街頭アンケート用紙のように仕上げたデザイン。かっこいい。 くしゃくしゃっとしたような紙の一部にフォームが設置されている。 こちらもメモに名前を書くかのごとく。 深海に光がさす感じのイメージ。 シンプルイズベストなレイアウト設計がなされている。 １，２，３，
エンジニアにもわかる「ユーザーインターフェース設計」
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめに 島津悠樹と申します。Yahoo! JAPANのソーシャルメディア系サービスの開発・ユーザーインターフェース（以下UI）設計を担当しています。私からは「エンジニアにもわかる『ユーザーインターフェース設計』」と題し、エンジニアのみなさまに考え方のヒントとなるようなネタをお届けします。 エンジニアの方々にとって、UI設計は、おもしろそう、けれど、どこかとっつきにくい......、そんな印象を持っておられるのではないかと思います。 私も以前はそう思っていました。ですが、とっつきにくさを理由にUI設計をやらないのはもったいない、という思いで試行錯誤した結果、なんとか、UI設計のお仕事をいろいろ担当させていただくことができるようにな
チュートリアルでここまでやる？というプロレベルのWEBレイアウト作成チュートリアル:phpspot開発日誌
チュートリアルでここまでやる？というプロレベルのWEBレイアウト作成チュートリアル 2009年03月17日- 150 Useful Adobe Photoshp Web Design Layout Tutorials and Techniques | 2experts Design - Web Design and Graphic Design Blog チュートリアルでここまでやる？というプロレベルのWEBレイアウト作成チュートリアル。 プロレベルといっても様々ですが、そのなかでも優れたといえるレイアウトとデザインのチュートリアルが公開されています。 真似することでそれなりのものを作るのは難しくなさそうです。 Create a Magic Night Themed Web Design from Scratch in Photoshop マジックをイメージした、少し怪しげなレイアウト。占
ウノウラボ Unoh Labs: 「視線を導く」方法あれこれ
yamazakiです。毎度毎度技術系なこのウノウラボには馴染まない話題を振りまいているわけですが、さてはてどの程度お役に立てているものか…。 今回のテーマは「視線」です。例えばWebサイトは「見てもらう」ことが大事ですし、また、UI設計の場面などでも、「視線をうまく導いてやる」のは使い勝手をよくする上でも大切なことだと思います。といったわけで、ユーザの視線をうまく捕まえてみたり導いてみたりする上で役に立つかもしれない情報を簡単にまとめてみます。 １．視線をつかまえる Web上にも街にも広告だの何だのと情報が氾濫しています。その中で「見てもらう」ためには何かしらの工夫が必要になることがあります。というわけでまずは「人の視線をつかまえる」ための方法論を少し。 「人の顔」を使う まずはこの画像を見てみてください。 01 posted by (C)フォト蔵 最初に、どれを「見てしまいました」か？
成功するショッピングサイトに必要な17の新常識 | POP*POP
SEO関連の話題を扱っているseomoz.orgにて興味深い記事がありました。「17 New Rules for Successful E-Commerce Websites」です。 ショッピングサイトを作るときにはどういった点に気をつければいいか、かなり参考になるのではないでしょうか。 以下に詳しくご紹介（あまり好きではないですが、説明の都合上、元記事からそのまま画像を拝借しています）。 ユーザーがどこにいるのか教えてあげよう ユーザーがトップページ以外にいる場合、どのセクションにいるのかわかるようにしましょう。パンくず型のナビゲーションも有効です。 選択条件を解除できるようにしよう ユーザーは一般的に選択条件を追加しながらサイトを見ていきます。そうした選択条件はすぐにはずして元に戻れるようにしておきましょう。 一般的な並び替え方法はきちんと用意しよう ユーザーが選択しやすいように「価格
知っておいて損はないAJAXやCSSを駆使したタブインターフェース18種類 - GIGAZINE
技術的知識が無くてもタブを作れるフリーソフトからかなり派手な効果を伴うタブ作成ライブラリ、Yahoo！やGoogle、Adobeの作ったタブまで、いろいろと応用が利いて独自の特徴があるものをざっくりと18種類ほどピックアップしてみました。 いろいろなページやブログで頻繁に見かけるタブ方式のメニューですが、こうやって並べてみると実は見せ方も使い方も種々様々であることがよくわかります。 まずは知識不要でタブが簡単に作成できる「CSS Tab Designer」。Windows用のフリーソフトで、約60種類ものデザインが用意されています。その中にタブ方式のメニューもたくさん用意されており、ほかにも縦型のメニューやZDNet風メニューなども用意されています。 OverZone Software - CSS Tab Designer 細かいカスタマイズが可能なタブメニュー。画像を使ったサンプルも用意
IFRAMEを使わずにHTMLファイルから他のHTMLファイルを読み込む方法:phpspot開発日誌
Insert HTML page into another HTML page | published @ aplus moments IFRAMEを使わずにHTMLファイルから他のHTMLファイルを読み込む方法。 Objectタグで外部ファイルを読み込む方法があるんですね。 <html> <head> <title>test</title> </head> <body> <!--[if IE]> <object classid="clsid:25336920-03F9-11CF-8FD0-00AA00686F13" data="/exec/some.html" style="width:100;height:100px"> <p>non object</p> </object> <![endif]--> <!--[if !IE]> <--> <object type="text/html
Web Design Library(ウェブデザインライブラリー) ―ウェブクリエーター向けの情報サイト
ラブコメプリンスのパクソジュンに釘付けの日々 韓国のイケメン人気俳優といえば、パク・ソジュン！ 2020年に大ヒットした韓国ドラマ『梨泰院クラス』の主演で、更に人気は加速しましたよね。 私も『梨泰院クラス』視聴前から彼の作品は見ていたのですが、どんな役柄でもこなせてしまうなと 強く逞しく 不合理な世界に正面から立ち向かう 血気盛んな若者の反乱 なパク・セロイ(パク・ソジュン)を夢中になって見ていました。 『愛の不時着』と並び日本でも多くの方が視聴されたと思います。 特に『梨泰院クラス』は『愛の不時着』と比べてロマンス色が薄く緻密なビジネスプランなども要素に盛り込まれていたので、男性からも人気の作品でした。 他にも彼の出る作品出る作品がヒットを飛ばしています。 2014年：魔女の恋愛 2015年：彼女はキレイだった 2016年： 花郎＜ファラン＞ 2017年：サム、マイウェイ～恋の一発逆転！
イラレで便利 for Adobe Illustrator - アドビ・イラストレーターのツール集
たくさんの画像を一括配置したり、フォルダの中のファイルをまとめて印刷したり、アンカーポイントを整列させたり、テキストを改行でばらばらにしたり、またはバラバラのテキストを改行でつないだりなどなど、大量のファイルの一括処理や、微妙に面倒な各種作業の時間短縮に効果があります。「この作業を、１クリックでも少ない手順で！」という要望にお応えします。
角丸ライブラリ - tikeda::Diary:
最近角丸を作る機会が多かったので、今後の為に色々整理してたんですが、公開しておきます。使えそうだったらいじって使ってください。中身の文書を書き換えれば上下左右と可変するように柔軟になっています。また、一部PSDも同封してます。 0501curve.zip 中身はこんな感じ。 ベーシックなタイプ 01：小さ目な角丸 02：大き目な角丸 03：斜線の角丸（背景画像をループ） 04：ストライプの角丸（背景画像をループ） 05：木模様の角丸（背景画像をループ） 06：リボンのついた角丸（背景画像を固定） 4つ角をの内側を透過GIFにしてるので、大枠の背景を変えれば発想次第で色々と使えると思います。HTMLとCSSは大体こんなんです。divが多いのがちょっと嫌な感じですが。はてな内ではspanでやってたりもします。 HTML <div class="curve-01"> <div class="cu
Photoshop で背景透過の美しい favicon を作成する - 2xup
2006-04-28T23:23:04+09:00 favicon (ファビコン)はウェブブラウザのアドレスバーや、ブックマークした URL の横に表示される小さなアイコンです。いまやもうサイトのアイデンティティを明示するツールとしてほとんどサイトでみることができますが、小さいファイルであると共に、ファイルを扱えるソフトェアがそれほど多くは無いため、なかなか想い通りにデザインできない。という悩みを持っていました。できれば背景を透過にして、マットの少ない美しいものを作りたいと考えていて、使い慣れたソフトウェアである Adobe Photoshop で作れれば幸せだなあ。と思ってました。 これまでは、FavIcon from Pics という Web 上のツールを利用して作っていましたが、これは背景を透過にできなかったり、元の画像から変換される際に大きく画像の質が落ちてしまうという欠点がありま
テーブルをJavascriptで自動的に見やすくする:phpspot開発日誌
Automatic colored rows - Example for BiteSize Standards テーブルの背景って次のイメージのように行ごとに交互に色分けされていると見やすいですね。 かといって、サーバサイドでアイテムを回して、１個１個設定するのも結構面倒だったりします。 リンク先のサンプルでは、JavaScriptを使って、trエレメントを探索し、交互にクラスを割り当てていくことで、自動でテーブルに色をつけてるようです。 これで、テーブルはシンプルにHTMLでコーディングでき、サーバサイドの技術なしで見やすいテーブルが作成できますね。
スタイルシートスタイルブック
PG WALLET สล็อตออนไลน์พร้อมเงินฝากอัตโนมัติ pg slot วอเลท ผู้ให้บริการสล็อตออนไลน์ระดมทุนผ่าน True Money Wallet บริการสล็อตฟรีที่พร้อมมอบประสบการณ์การเล่นเกมสล็อตออนไลน์และบริการฝากเงินให้กับคุณ ง่ายๆ ด้วยวิธีการฝากเงินยอดนิยมในปัจจุบัน บัญชีทรูมันนี่ หรือ ทรูมันนี่วอลเล็ท PGWALLET ครบวงจร แนะนำสมาชิกใหม่ ส่วนลด 50% ข้อเสนอพิเศษสำหรับสมาชิกใหม่ โบนัสฟรี 50% ฝากครั้งแรกเพียง 100 บาท slot pg รับวอลเ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
templamatic.com
PHP & JavaScript Room
デフォルトスタイルの差異を無くすCSS