ちょっとデザインの刺激が欲しい、最近デザインがマンネリで、、、といった時に他の人がつくったものを眺めることでインスピレーションがふつふつと沸いてきたりしませんか。 ディテールにこだわり、しっかり作りこまれたUI用の最近リリースされたPSD素材を紹介します。 眺めるだけでなく、使ってもよし、です。 まずはページやエレメントの背景に使うテクスチャ素材から。
ちょっとデザインの刺激が欲しい、最近デザインがマンネリで、、、といった時に他の人がつくったものを眺めることでインスピレーションがふつふつと沸いてきたりしませんか。 ディテールにこだわり、しっかり作りこまれたUI用の最近リリースされたPSD素材を紹介します。 眺めるだけでなく、使ってもよし、です。 まずはページやエレメントの背景に使うテクスチャ素材から。
数千万のLINEユーザーにウェブページの情報を伝える魔法のボタン「LINEで送る」の作り方 2012年10月12日 11:18ブログ 作り方というか、サービス公開のお知らせというか。 それは何 このブログにスマートフォン等でアクセスすると、 記事の下にこういうボタンが出るようになってます。 これをタップすると、こんなページに飛んで そこに何をすればいいのか書いてあります。 要するに上のボタンを押すだけ。 LINE がインストールされているスマートフォンで開けば 勝手に LINE のアプリが立ち上がるので、 あとは友達リストから相手を選ぶと ページの情報が勝手に挿入されるので その記事について知らせることができます。 「Facebook でシェア」ならぬ「LINE でシェア」ボタンです。 増大し続ける LINE の影響力 これを書いている時点でLINE の登録ユーザーは 世界6,500万人・
どんな感じで書けば楽できるかとか、後から修正しやすいかとか、そんなことです。 ボタンのスタイリングを例に、自分の通った道を追ってみます。 今回使う HTML は次のようになっています。 <div class="buttons"> <button class="edit">Edit</button><button class="publish">Publish</button><button class="delete">Delete</button> </div> これを CSS でスタイリングしていきます。 1. とりあえず個別指定 こんな極端な書き方する人はあまりいないでしょうけど、例として。 .edit { margin: 0 5px; padding: 0; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 5px; widt
WEBサイトを運営していれば、サイトに訪れてくれたユーザーに【申し込み】【購入】【資料請求】【問い合わせ】などのアクションを、たくさん起こして欲しいと考えると思います。 そのためWebクリエイターは、どうしたらコンバージョン率や数が高まるのかを日々考え・テストを繰り返しています。 私もそのことを考えている1人として、今回はサイトの目的を達成させるために欠かすことのできない大変重要な要素の1つである【行動を呼びかけるためのボタン（Call to Action Button）】についての考えをまとめたいと思います。 目的を達成へと導くボタン ボタンはホームページの最終的な目的である【申し込み】【購入】【資料請求】【問い合わせ】などのアクションを、ユーザーに起こしてもらうためには欠かせない要素の1つです。ボタンのデザインやボタン内の文章を変えただけで、資料請求が増えたなんていう事例はたくさん存在
2012年 6月 13日 新しいサーバーでブログをリニューアルして気がついた、SNSボタンの有無でかなり読み込み速度に差がある。といっても2,3秒ほどですが、これは結構命取りだったりします。 まぁ私もそんなに詳しいわけではないので断言できませんが。 ・訪問者はその数秒でサイトから逃げる ・Googleはその数秒を評価基準に入れる たしか遅延ロード(Lazy Load)とかいう技術ですね。 わりとポピュラーなコードで何とかなったので書いときます。 ピュアなJavaScriptではなく、jQuery使いますね。 方法その１ 時限式読み込み body閉じタグの前あたりに書きます。 . . . <div id="snsbox"></div> <script type="text/javascript"> var snscode = 'ここに、SNSのコードを書く' + '一行でつなげても良いが見に
先日、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
PlugoBrowser - TinyMCE / CKEditor Image & File Manager / Uploader TinyMCE Image & File Manager Twitter Bootstrap Button Generator - the easiest way how to set up your buttons based on Twitter Bootstrap in a seconds. The Twitter name, logo, Twitter T, Tweet, and Twitter bird are trademarks of Twitter, Inc. in the United States and other countries. 2012 © Plugo - Czech Republic based webdesign compa
<ul id="menu"> <li><a href="#">html</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">PHP</a></li> <li><a href="#">Perl</a></li> </ul> HTMLは最後まで変更しません。 #menu { width:530px; padding:0; margin:0; list-style-type: none; } #menu li { width:20%; float:left; padding:0; margin:0; text-align:center; } #menu li a { width:auto; color:#fff; font-size:12px; font-weight:
コーヒーサーバは香炉である 美人プログラマごうだまりぽのブログですがデータが吹っ飛んでしまって仮復旧中。画像が入っていないところ、整形されていないところなどがあります。 検索 メインメニュー 最近、知らないうちにアダルトサイトなどをFacebookで「いいね」してしまうという問題が話題になっている。 知らない間にアダルトサイトを「いいね」 Facebook知人、同僚に性的嗜好がバレる (J-CASTニュース) これにはクリックジャッキングと呼ばれる手法が使われている。たとえば、ユーザが興味を引くような画像を表示してクリックを促し、実際にはその上にかぶせるように設置した「透明の『いいね』ボタン」を押させるというような仕組みだ。ページ内の要素の「透明度」を変えることでわりと簡単に仕掛けられる。 かんたんな絵であらわしてみた。図中のいいねボタンは半透明になっているけれど、実際に仕掛ける場合は透明
CSS3を使うと画像のようなボタンも簡単に作れます。よくあるタイプのボタンですが、できあがりのコードだけだと勉強にならないので、作り方を順番に紹介していきます。 今回、ChomeとFirefoxで動作確認しています。IEだとグラデーションが使えないので、同じボタンがたくさんあるように見えます。スマホサイト用なんかだと十分実用的だと思います。
TOP > Design > 立体感のあるUIが手軽に利用できるフリーUIキットまとめ「New Creative UI Kit Free Download」 webサイトやスマートフォン特有のUIデザインは、視認性とクリエイティブ性の両方が求められるクオリティのパーツ制作が必要不可欠となってきます。そこで今回は、立体感のあるUIを手軽に利用できるフリーUIキットをまとめた「New Creative UI Kit Free Download」を紹介したいと思います。 Simple UI Kit – Icon Deposit カラートーンの異なるUIキットが、いくつも紹介されています。中でも気になったものいくつかピックアップしましたので、下記よりご覧ください。 詳しくは以下 ■Vector UI Bundle – Icon Deposit シンプルなカラーリングのUIキットです。落ち着
CSS3のスタイルやアニメーションを使って、ユーザーが使いやすい美しいボタンを実装するスタイルシートのチュートリアルを紹介します。 Styling Button Links With CSS3 [ad#ad-2] 下記は各ポイントを意訳したものです。 Step 1:ボタンの実装 Step 2:ホバーのスタイル Step 3:アクティブのスタイル オプション:テキストの選択を不可に まとめ:全スタイルシート Step 1:ボタンの実装 ボタンの実装には、シンプルなテキストリンクを使用します。 HTML テキストリンクにclassを付与します。 <p><a class="button-link" href="#">Button Link</a></p> テキストリンクをボタンに見えるようスタイルしていきます。 ボタンがクリックしやすいように、paddingの値を充分に設定します。 .butto
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
