話題のサークルデザイン｜展開可能なソーシャルボタンをjQueryで実装できる「ClassySocial」
スマートフォン用に作られたアプリのうち、今年はサークルが広まっています。 同時にフラットデザインなんかと併用して使われることがあり、今回はこうしたサークルデザインのアクセントとして使うことが出来るサークルボタンをご紹介致します。 これはjQueryを利用して、比較的簡単に設置出来るのが利点です。 以下からダウンロード可能。 ClassySocial | Class.PM とりあえずイメージとしては以下の様な。 中心から周りに展開。 ボタンから右へ展開。 今回の紹介されているものは、ソーシャルボタンですが、使い道はいろいろですね。 設置 jQueryお決まりのコレ。<head></head>内に記述。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 続いて、CSS
Twitterの大衆化によってブログ界隈における『タイトル』に変化が起きている
Twitterの影響によって、ブログ界での記事のタイトルに変化が起きている。それは静かにやってきて、少しずつ大きな影響を与え始めている。 Yamadaです。 というわけで、今回注目したのが最近ブログ界隈で起こっている『タイトル』の微妙な変化について考えてみましょう。 代表的な変化 極端な例を上げます。 レベル0 今までのごく一般的なタイトル 『iPhoneの満充電を10回行えるモンスターバッテリーの登場 アイホンバッテリーブログの日記』 これを起点に考えてみましょう。 レベル1 ユーザー名の挿入 『iPhoneの満充電を10回行えるモンスターバッテリーの登場 @yamada_nt アイホンバッテリーブログの日記』 リプライ名を挿入することで、どこでどんなツイートをされているかをわかりやすくするために入れている人が増えてきてますねー。 レベル2 ハッシュタグの挿入 『iPhoneの満充電を1
Web制作の為の無料Webサービス・ツール40*ホームページを作る人のネタ帳
web制作で使えるWebサービスや、Webツールなどをご紹介。 小分けして紹介していた分もあわせてまとめています。定番の物からマニアックなものまでお楽しみください。 グラフィック・創作 10,000s Cool FREE Seamless Patterns-パターンファイルジェネレータ Web制作でもよく背景で利用するパターンファイルを作成する素晴らしいジェネレータ。様々な模様があり、色は決めれますので、組み合わせはほぼ無限です。 Pixlr Photo Editor-オンラインフォトエディタ 世界で最も人気とされるオンラインフォトエディタ。OSを選ばない。 photoshopに近いインターフェイスと、ブラウザさえあれば動くという使用が人気。ユーザー登録しなくても利用できる（したほうが便利）。 Vintage Effect-レトロ、ヴィンテージエフェクト 上のPixlr.comが運営するも
人気ブロガーがネタ作るまでに使う27手の妙技*ホームページを作る人のネタ帳
今回は多くのブロガーがネタを考える時、探すとき、発見するときに使う視点と、それを記事にするときに利用する妙技をご紹介。最初6個くらいかなと思ってスタートしたら27個とかになってしまい、勝手に命名していますがご愛嬌でお願いします。 ネタを作る方法が良く分からない場合や、ネタが無い場合。そんなときに思い出してもらえればと思います。 １）串刺し バラバラになった記事を一つにまとめるキュレーション。 それぞれがバラバラの時は意味をなさないが、まとまると一つの価値が生まれる。 逆にそれぞれに価値があった場合でもきちんと整備する事で昔の情報に価値をつけることが出来る。また、全く異なったジャンルのモノでも、「人生がつらいときに見るべき記事」といった方法で一つの考えや感情にぶつける事で同じく価値が生まれる。 ２）中刺し 別々の記事の中で、同様の話題について触れられている事をカウントしたり、測定したり、まと
CSS3で作るあんなものやこんなものまとめ
さまざまな可能性を秘めたCSS3の登場から、いろんなエントリーが出てきましたので、一部をまとめてご紹介。 ちなみにこの画像はこちらのもので、CSS3だけで画像を使わずにキュウべえを書いたそうです。 CSS3でどんなことができちゃうの系 CSS3のみでいろいろなオブジェクトの作り方を掲載されている。 CSSについて知っておきたいことまとめ。 仕事で役立つ事もばっちり羅網。このまとめっぷりはすごいです。 CSS3の完全一夜漬けマニュアル。 とりあえずこの記事のところにサンプルがありますので触ってみてください。 すごく気持ちいい体験が待っていることでしょう。 CSS3のアニメーション効果を利用してちょっとダイナミックな404ページを表現しています。 すっごいかっちょいい。サンプルデモはこちら。 CSS3だけで3Dを表現。とりあえずこれがCSS3だというものを見せてくれる。ぱない。chromeでも
ユーザビリティの原則と現場で使えるユーザビリティテストの方法
今回は、Web制作の現場でも使えるようなユーザビリティテストの方法をご紹介します。 アクセス解析を使ったものではなく、あくまでもサイトの構造の問題点を洗い出す方法です。 そのため、それにいたる細かい基本部分についてもかなり大胆に触れてます。 試験をする前に、どのような観点からサイトを見て行く必要があるのかと言うユーザビリティの原則から、試験方法、試験の結果からの問題解決にむけて、私がこれまで行ってきている仕事の一部をご紹介します。 Webユーザビリティについて：目次 書き出したらとまらなくなりましたが、これでも結構情報削りすぎたかなぁというのはあります。 私の仕事について方法を学べばユーザビリティテストは出来る最大の原則はユーザーに考えさせない事たった一人でも試験をするほうが100倍ましになるユーザーの視点を理解する箇所法則1「長いテキストを最初からよし見ようとは思わない」法則2「長たらし
web屋さんの為のベストエントリ2011年3月度版
というわけで、web屋さんに送るwebマガジン3月号です。 今回はいつもよりさらに厳選してます。逆に量を減らして見ました。 もしかしていつも無駄に多いんじゃないかと思いまして・・・。今回も色々必読な記事はありますが、jQuery関係の記事が少なかったのが特徴でした。 逃してしまった方はぜひこの機会に。 3月のWebマガジン目次 超必読記事WEBデザイナ向けCSS/JavaScript素材/無料素材業界記事 必読記事 PNGの画質を劣化せず極限までファイルサイズを落とす、たった1つの方法 たった一つかどうかは別にして、png画像のサイズを落とす事ができるフリーソフトを紹介されています。 ついに出た！Chrome版「Page Speed」の使い方 :: Stocker.jp / diary webサイトの表示速度の改善について色々と書かれています。 Chromeのツールの紹介記事ですが、参考に
わずか10分でスマートフォン用サイトが無料で作成できるウェブサービス「smart4me」を使ってみた
リリースされたばかりですが、スマートフォン用のサイトを手軽に作れると言う事で早速試してみました。 普通のウェブサイトなら話題のabout.meであなたのプロフィールページを1分で作ってみようを参考にしてみるといいかもしれないです。 smart4meってどんなサービス？ 以下引用を参考に。 smart4me（スマート フォーミー)とは？iPhoneやAndroidなどスマートフォン向けサイトが無料で、簡単に公開できる、世界初のWebサービス！ ブログ感覚で、ユーザー自身のスマホサイト（スマートフォン向けサイト）を簡単に公開が可能。 TwitterやBlogなどのソーシャルメディアとも連携可能なので、あなたの最新情報をすべて集約できるなど、使い方はあなたのアイディア次第です! 早速ユーザー登録してみよう smart4me ユーザー登録はちゃちゃっと終わります。 登録したメールアドレス宛にメール
Web制作をこれから始める人の為のスキル・HTML・CSS・ブラウザ・写真素材入手の基礎情報*ホームページを作る人のネタ帳
Yamadaです。 かれこれWeb屋暦が14年くらいになるんですが、こうしてWebに携わっていると、3ヶ月周期で情報の入れ替えをしていかないと、正直追いつかないと感じます。そんな激流のようなWeb業界にこれから飛び込もうと言う新卒の方や、中途の方に送るバイブルとなればと思います。 というわけで改めて春ですし、これからホームページ（Webサイト）を作成してWeb屋さんになる方へ送るお勧めサイト集です。 後編はこちら Web制作を始める人の為のスキル・ワイヤーフレーム・SEO・マーケティング・Webサービスの基礎情報 忘れないで欲しい事 Web制作には、様々なスキルが求められます。 しかしその技術が、いつの間にか消えていったり、使えなくなったりしました。新しいデザイン、新しいコード、新しい言語、新しい環境、様々なものがあります。しかし、それらを追い続けていくうちに、一つ、とても大事な事を忘れて
Web屋さんのためのベストエントリまとめ2011年2月度版
今月のWebマガジン目次 超必読記事WebデザインWordPress関連記事CSS/JavaScript無料アイコンWebサービス業界記事 必読記事 結局どうすればいいの？ - Dive Into HTML5 HTML5を学ぶ最適な資料。内容も面白いです。 PayPal 基礎知識ゼロから始める、個人利用・事業利用の使い方大辞典 日本でなじみないPayPalだが、そろそろきてもおかしく無いながれ。ブクマをすすめます。 目次にもどる Webデザイン 優れたiPhoneサイトデザイン集 - iPhoneデザインボックス スマートフォンサイトのデザイン集です。デザインのインスピレーションに。 絶対見ておきたい有名企業のスマホサイトまとめ 有名企業サイトのスマートフォン用デザインのまとめ記事。 25 Examples of Wireframes and Mockups Sketches 手書きのWe
本当は解決してない記事パクリ問題と今後の対策
この1週間で大きな話題になったと言えばブログの記事を、完全にコピーペーストして、それらを自分が書いたかのように語っていた、パクリブロガーの話題です。 騒動のまとめをしようと思ったら概要がすでにまとめられていたのでそちらを参考にしていただきつつ、今回の騒動が解決したかのように感じますが、実は全く解決してないじゃんっていうお話で。 で、実際にもし、あなたがパクられたらどうすればいいのかっていう具体的な解決策も考えてみたいと思います。 はじめに 今回私の記事も2記事ほど全文完全にコピペされました。 web業界人が見ておくべき2011年の年末年始ハイライト 私が考えるすごいブロガーとは まとめ記事を盗まれるのは良くある事なのですが、まさか自分の経験や言葉を書いた記事まで盗まれたのは初めてで吹き出しそうになりました。 文中に登場する人妻もかりさんがブログを書かかないでいたら罰として鍋を洗うというのを
読者がまず先に求めている情報を提供すると記事は最後まで読まれやすくなる
ブログに限らず、ラインディングをされる人なら当然のように文章を結構書くと思いますが、こうした『相手に伝えるための技術』と言うものには様々なものがあります。 いくつかある中から、今回は読者に、あなたのブログの記事を最後まで読んでもらうためにするべき事について考えて見ましょう。 どういうことかというと、ネタ帳ならこんな情報が多いとか、他のブログはこういう情報が多いとか、要するにブログの特徴が強ければ強いほど、ユーザーは事前に「こんな情報を提供してくれる」というイメージを持ちます。 文章を読んでもらうには、まず、どのような情報を得られるのかと言う事が読者に明確に伝わっている事がポイントなのです。 公開するジャンルに特徴を持たせても良いですし、自分の考えのみをひたすら書き殴っても良いです。 読者はこうした情報から、そのブログやブロガーのイメージを作り、興味のある人はその人のブログをまた見たくなりま
ユーザーの視線を誘導する３つのユーザビリティ改善方法
webサイトにおけるユーザーの視線は、なかなか見る事が出来ない代物ではあります。 実際に企業や、あなたが作成したwebサービスが、ユーザーに訴えたい事を、ユーザーにきちんと届ける為に、どのような方法があるのかを考えて見ましょう。 １）全ての情報を遮断する 手っ取り早い方法としては、あらゆる情報を遮断する方法があります。 つまりその言いたい事意外の情報をあえて隠蔽するわけです。 実にシンプルな方法です。 ただし、シンプルであるがゆえに非常に難易度が高いです。 なぜなら、配置するテキスト選びは慎重にしなければなりませんし、訴えたい事が多い場合、何をまず訴えるべきかをしっかりと考えて、ユーザーが迷う事なく、そして的確な操作が出来るように誘導して上げる必要があるからです。 １）サービスに対して興味を少しだけ持ってもらう情報を書く ２）サービス開始はちょっと・・・という人のためにクリックしやすいリン
jQueryプラグインのベストトレンド総まとめ2010*ホームページを作る人のネタ帳
もはやこの業界ではかなり浸透しつつあるjQuery。 今回はそんなjQueryにスポットを当て、本年度紹介された中でも、ホットなトレンドプラグインをご紹介します。 ※プラグインつかってないのもあります。 １）3D表示プラグイン サンプルデモ 今年のトレンドと言えば3D。 というわけでこちら。まずはサンプルデモを確認。 触ってわかる通りですが、2枚の画像が3D表示されます。 呼び出す $(function() { $('#mindscape').smart3d(); }); HTML <ul id="mindscape"> <li><img src=".../mindscape1.png" /></li> <li><img src=".../mindscape2.png" /></li> </ul> CSS #mindscape { width: 720px; height: 170px;
webデザイナーの色彩スキルを磨くエントリーまとめ
多くのwebデザイナーが、行き詰ったときに吐かれる台詞。 それが『センス』です。 センスがない、というのはよく聴く言葉です。 しかし、色彩感覚とは『センスの問題』ではなく、たんに勉強不足というケースも少なくありません。 今回はそんな色をテーマにしたエントリーをまとめて見る事にします。 とにかく最初に学ぶ基礎 この色彩系の分野においては圧倒的にwebクリエイターボックスブログが強いので、その中でこれは使えるぞというエントリを何個か抽出しています。そのほかにも、ちょっと古い記事でもとても参考になるものからもご紹介いたします。 正直私のブックマークが配色、色彩、色で60近くのエントリーがありました。 色で学ぶ部分と言うのは「広く浅く」では無く、どちらかと言うと「狭く深く」のほうが強い気がします。なので、そのブックマークの中から、かなりというかもう限界まで厳選した物をご紹介いたします。 配色パター
Webデザイナーなら見ておいて損のなさそうな２０のFLASHサイト
フルFLASHサイトを紹介するエントリーがありました。 多分「いいね」ボタンがあったら、みんな押しちゃうんじゃないかな？ FLASHでできたWebサイトには、いろんなワクワクがありますよね。 そして、こういうサイトを見るときにはユーザビリティの事を一度忘れて見ましょう。そのほうがぐっと楽しめるはずです。 私が選ぶBEST7 20 Flash Sites for Your Inspiration 20個のうち、私が是非見ておいてほしいなと思うものは7つ。 全体的に音出るサイト多めなので、ご注意ください。 1)thibaud.be デザイナーさんのポートフォリオサイト。 私の中ではキングオブデザインです。使いやすさ、見易さ、さわり心地、どれをとっても最高です。 このアイデアはかなりいいかもしれない。 と言うか惚れる。 2)nadinefeghaly.com イラストポートフォリオの中でも、非常
iPhoneアプリ有料化で批判殺到｜食べログは何をミスったのか
月額課金というスタイルで、突如食べログアプリユーザーの機能制限をし、その機能を有料化した食べログ。 今回食べログアプリがやらかした事は、多くのユーザーに嫌われ、アプリを消してしまう人まで増やす結果となった。 一体何が起こったのでしょうか？ 9月の食べログアップデート炎上事件 もはや有名な事件なので、すでにご存知の方も多いかと思いますが、食べログがやらかした事で報道されている内容は次の一点。 お店検索の検索結果を点数順、人気順にソートできていたが、それを月額315円支払ってくれるプレミアムユーザー限定の機能にするため、利用できなくなります。 というものだ。 これがきっかけで鎮火不能のレビュー炎上となった。 もはやこのアプリすごく良いという声は何処からも聞こえてきません。 実際に使って見るとわかりますが、これまで使えた機能が奪われたので「iPhoneアプリ」としてはかなりいらないアプリにまで落
ウェブ制作者のためのベストエントリ33【2010年7月版】
というわけで、しばらくまとめていなかったまとめ記事を再開し、私は元気ですとアピールしたい。 7月にあつめたブックマークのまとめです。 7月度必須ブクマベスト HTML5 Canvas Cheat Sheet 悩んだけど一応ベストへ。 HTML5 Canvas tagのチートシート。日常的に使うものでもないし、開発者向けになってしまうけど念のため。 OSを選ばないウェブデザイナーのための使えるウェブアプリ15*ホームページを作る人のネタ帳 7月に書いたけどついこの間のようだと思ったら、あんまり記事かいてないからそう思うんだきっと。 ついでにこちらも7月でした。 今日から現場で使えるjQueryのフォーム関連プラグイン15選 iPhone等のWebアプリをHTML5で構築する為のフレームワーク・Sencha Touchを触ってみた スマホアプリ開発者ならブクマしておきたい一品です。 Googl
無料のphotoshop素材をダウンロードできる20サイト
個人的に、今月最高のクリティカル記事を発見。 いやほんとに。これぁすごい。 誰もがいいね！って言いたくなると思います。 GraphicsFuel 素材のレパートリーとクオリティ、両方ともすごい。 サイトのテンプレート ちょっとしたオブジェ クールなRSSアイコン 素敵なワインケース 見開き本 個人のポートフォリオサイト用のミニフレーム シンプル張り紙デザイン 本当に素敵なもがわんさかあります。 ぜひぜひ時間のあるときにご堪能あれ。 GraphicsFuel.com FreePSD サイトデザインからしてもはやPSD的な感じで素敵。 FREEとかかれたものはFREE。 PREMIUMが有料。 TUTORIALはその作り方が掲載されています。書いてないやつはほぼ無料で掲載されています。特に、有料のデザインが参考になります。お金をとるレベルとはなんなのかをヒシヒシと学べますね。 Photosho
OSを選ばないウェブデザイナーのための使えるウェブアプリ15
OSがWindowsであろうと、ubuntuであろうと、共通のサービスを受けることができるのがウェブアプリケーションです。 ウェブデザイナーの中には、自宅ですでにubuntuを利用している人も多い。また、Mac、Windowsと、各自それぞれの使いやすい物を利用していると思います。 今回はこうしたウェブ開発を仕事としている人が利用しそうなツールをまとめてみたいと思います。 スケジュール管理 Googleカレンダー もはや説明不要のスケジュール管理システム。 ドラッグによる複数日数のスケジュール投稿は、なにかと連日作業になるウェブ製作にぴったり。 また、タスク管理も結合されたため、細かい作業などの記入も可能。なにより複数人での予定の共有もできるのが便利です。 メール Gmail もう使っている人も多数いるかもしれませんが、Googleが提供するGmailはかなり強烈なアプリケーションです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
