作成：2014/05/7 更新：2014/11/01 Web制作 > ギャラリーサイトやECサイトなどで、最近よく見かけるデザインやエフェクトなど、制作前に知っておくと助かる、「どっかで見たことあるけど何だっけ？」といった感じのjQueryプラグインや最近のトレンドなるものをまとめました。ページにちょっとした工夫を凝らしたいとき、動きのある仕掛けでキャンペーンサイトを作りたいときに。 エンジニア速報は Twitter の@commteで配信しています。 もくじ メニュー １．フィーチャーリスト ２．スティッキーヘッダー 画像エフェクト ３．マウスオーバーで画像にキャプション ４．イメージビューア ５．ズームインエフェクト ６．ブラーエフェクト スクロール ７．Infinite Scroll(無限スクロール) ８．画像シーケンス ９．横スクロール １０．フリック機能 レイアウト １１．画面全

ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. あなたは、世の中の人たちの役に立つ、ヒットするWEBサービスを作ることを夢見ていないだろうか？ 昨年の３月にスタートしたチャットワークは、サービスのローンチ以来、着実にユーザーを増やし、今では、１０万ユーザーを超え、船井総研やKDDI、京都大学なども導入するなど、大ヒットWEBサービスに成長した。 それでは、このチャットワークはどのようにして生まれたのだろうか？ 本日は、今、最も勢いのある国内WEBサービスの一つ、チャットワークを開発した山本敏行氏にお聞きした、「ヒットするWEBサービスを作りたいなら絶対抑えておくべき５つの鉄則」をご紹介する。 上記の写真は、ChatWork社CEOの山本さんがサンフランシスコのbtrax (http:/

足掛け2年、全ての関連作品を見てからアベンジャーズを見て最高に盛り上がったminamiです。 Webデザインの中でもサイトのUIデザインは近年重要性を増していると思いますが、デザインする際のインスピレーションを受けられるサイトをご紹介します。 UI Patterns UI Patterns User Interface Patter Libraryというサイト名通り、UIが体系的にまとめられ解説されています。「Design patterns」ではそれぞれのUIに対して、どういう問題を解決してくれるものなのかの詳細な解説があるので、普段なんとなく使っているUIを基礎から勉強し直せます。 ui parade. ui parade. UIを種類別に集めたサイト。なかなか洗練されたものが集まってますね。 PATTERN TAP PATTERN TAP 良さ気なUIのスクリーンショットが集まるサイト

ドットインストール代表のライフハックブログ

今回は、Web制作の現場でも使えるようなユーザビリティテストの方法をご紹介します。 アクセス解析を使ったものではなく、あくまでもサイトの構造の問題点を洗い出す方法です。 そのため、それにいたる細かい基本部分についてもかなり大胆に触れてます。 試験をする前に、どのような観点からサイトを見て行く必要があるのかと言うユーザビリティの原則から、試験方法、試験の結果からの問題解決にむけて、私がこれまで行ってきている仕事の一部をご紹介します。 Webユーザビリティについて：目次 書き出したらとまらなくなりましたが、これでも結構情報削りすぎたかなぁというのはあります。 私の仕事について方法を学べばユーザビリティテストは出来る最大の原則はユーザーに考えさせない事たった一人でも試験をするほうが100倍ましになるユーザーの視点を理解する箇所法則1「長いテキストを最初からよし見ようとは思わない」法則2「長たらし

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 ul.tab { margin: 0; padding: 0; border-bottom: 2px #ddd solid; } ul.tab li { float: left; margin: 0 0 0 5px; position: relative; bottom: -2px; list-style-type: none; border: 1px #ddd solid; border-top: none; border-bottom: 2px #ddd solid; } ul.tab

Web制作を少しでも効率化しよう と思って（今更）いろいろ便利そう な情報を探しました。既に使って いる情報の方が多かったのです が、折角調べたのでシェアしたい と思ってエントリーです。 コーディングをもっと円滑に、という旨の情報です。順不同。あんまり多いと逆効果なので量は絞りました。一応これでも絞りました。絞ったつもり。 zen-coding 話題になったzen-coding。だいぶ慣れて来た方もいらっしゃるのでは。 zen-coding（本家） HTMLコーディングが3倍速くなる？「Zen-Coding」 秀丸Zen- Codingマクロ コーディングの効率化を図るZen codingをDreamweaver cs4に入れる方法 WP Zen-Codingが凄く便利 初期設定とかTipsとか 制作前に知っておくと便利なコードとかTipsいろいろ。 css書く前にチェック。 もう、cla

今月はこのクラウド時代に、インストール型フリーソフトの魅力を徹底的に追及していきたい。 第一弾として、WoopieVideoDeskTop というフリーソフトを使い倒して見た。 世界のと言ってもご安心あれ。 日本語対応も含めて、ニコニコ動画や、Youtubeなどの動画サイトから検索する事が可能。 なぜにわざわざそんな事のためにインストール型のソフトを入れるのかというと、このソフトの最大の特徴は動画のダウンロードが手軽に行われ、さらに、iPodやiPhone、携帯動画形式等に変換出来るという点です。 あとで暇な時に携帯で動画を・・・そんな願いをかなえてくれます。 早速ダウンロードから WoopieVideoDeskTop 条件としてFlashPlayerは、Adobe Flash Playerバージョン8以上必要です。 WindowsVista/XP。 インストールの時 かなり色々なものがイ

気が付くとすぐに伸びてきてしまう「前髪」。キレイに切るには美容師さんに任せるのが理想ですが、「前髪をちょっと切るだけでわざわざ美容室に行くのも…」と思うこともありますよね。今回は、「自分でも上手に前髪を切るコツ」をご紹介します。 ■切りすぎてしまうのはなぜ？切る前に気を付けておきたいこと ちょっとだけ切るつもりが思った以上に短くしてしまい、美容師さんに「どうにかして下さい！」と泣きついた経験はないでしょうか？さすがの美容師さんでも、髪をすぐに伸ばすことはできません。まずは切る前に気を付けたいポイントを見てみましょう。 ▽前髪カットの方法（コラムの元） - Beauty Tete 美容師さんが教える、カットを始める前に注意したいポイントがこちらです。 1.必ず“時間に余裕のある時”にカットする。 2.鏡の前でチェックしながら切る。 3.濡れた状態でなく、必ず髪が乾いた状態で切る。 4.よく切

WEBデザインのワイヤーフレームを書くためのツール10選「10 Excellent Tools for Creating Web Design Wireframes」 WEBデザインと言っても様々なフローがあり、受注を受けたとき、いきなり、Fireworksやphotoshopでデザインを始めるという方はなかなか少ないと思います。今回はデザインの前段階のワイヤーフレームを描くためのツールを集めたエントリー「10 Excellent Tools for Creating Web Design Wireframes」を紹介したいと思います。 .mockflow.com/”>MockFlow 基本的にモックアップをつくるための前段階のものなので、そこまで複雑な表現はできませんが、WEBのワイヤーを作るという意味で、様々な便利な機能が組み込まれています。今日はまとめられているツールのなかからいくつ

Photoshop光のブラシ web制作を進める上で、光を直接使うのではなく、なにかの背景に潜らせたり、メニューなどの後ろにうっすらと構えているラインとしてよく使われるのが、光のラインシリーズだ。 こうしたブラシは非常に人気が高く、私も良くブクマしているのですが、いかんせん、画像が無いとなんとも情報として使えない。 そこで今回はリンクとイメージを直結してただの羅列エントリとして仕上る事にしました。 あとブラシの設定方法がわからないという人がいたら記事の下のほうを参考にしてみてください。 １(+11) ２(+7) ３(+10) ４(+12) ５(+3) ６(+8) ７(+12) ８(+4) ９(+7) １０(+20) １１(+4) １２(+24) １３(+22) １４(+8) １５(+8) １６(+9) １７(+18) １８(+6) １９(+6) ２０(+8) ２１(+6) ２２(+8) ２

毎年エイプリルフールには記事を書こうかどうしようか迷うのですが、今年はエイプリルフールサイトをピックアップした記事を書こう！ということで。 円谷ッター 毎年やってくれる円谷プロが今年もステキなエイプリルフール企画をやってくれているようです。 » 円谷ッター(ツブッター) 「つぶやき」と「つぶらや」が「つぶ」繋がりになってるところとか、運命ならぬ宿命を感じざるを得ませんねw。円谷ッターとTwitterを連携させていて、Twitterクライアント上でエイプリルフール企画を楽しめるようにしているところなど、秀逸のひとことです。 しっくす・アパートの部屋 いつの時代のデザインだwと苦笑してしまう「しっくす・アパート」の部屋。 » しっくす・アパートの部屋 エイプリルフールコンテンツでありながら、きちんとMT5の製品PRをしているという・・・。マウスカーソルにくっついてくるキャラクターが無駄にかわい

2017年6月29日 Webデザイン, インスピレーション ECサイトを作る際は、使いやすさだけでなく、デザインももっとクリエイティブに！商品を理解し、それにあったデザインをすることでより効果的にユーザーにアピールすることができます。ここではサイトを開いた瞬間に「おっ！」と思うようなECサイトを紹介します！ ↑私が10年以上利用している会計ソフト！ 商品をより引き立たせるWebデザイン集 free people http://www.freepeople.com/ ノートに落書きをしたような手描き風のデザインや、ほどよくレトロ感のある写真加工に思わず釘付け。 DUCHY of CORNWALL NURSERY http://www.duchyofcornwallnursery.co.uk/ 落ち着いた色合い、ほどよいグランジ感、バナー写真の切り抜きなど商品であるお花を引き立てています。 k