ワイヤーフレーム作成に使える素材集30 – creamu
98375849/ iStockphoto/ Thinkstock ワイヤーフレームに使えるパーツを探している。 そんなときにおすすめなのが、『30 Free Web Design UI Kit Resources』。ワイヤーフレーム作成に使える素材集です。 いい感じのものが揃っていますね。 Free Sketching & Wireframing Kit JANKOによるスケッチ&ワイヤーフレームキット。ai,svg,pdf,epsフォーマットでダウンロードできます Free PSD Kit For Easier Website Wireframing FUELによるUIデザインキット。PSDファイルでダウンロードできます omnigraffle-wireframe-stencils OmniGraffle version 5.x (Mac OS X用)の素材。ボタンやスライダーなど M
HTML5 基礎知識 - web探検隊
HTML5を書くための基礎知識をメモHTML5の雛形XHTML5ではなくてHTML5のマークアップについて html> head> title>HTML5 基礎知識title> meta charset="UTF-8"> head> body> body> html> HTML5の新要素 文章構造に関するものsection汎用的なセクション。文章のアウトラインを構成する。articleセクションの一種で、Webページから独立したコンテンツを表す。asideセクションの一種で、外側のセクションに対する補足情報を表す。navセクションの一種で、外側のセクションに対するナビゲーションメニューを表す。footerセクションのフッター。headerセクションのヘッダー。hgroup複数の見出し(h1-h6)をまとめる。 外部コンテンツの埋込みfigureキャプションを伴うような内容のものを文章中に埋
福岡で開催されたHTML5カンファレンスに参加してwebの新しい世界を体験してきました
OperaやChromeなどいくつかのブラウザでは既に使用可能となっている2012年3月頃に正式勧告予定のHTML5。そのHTML5関連技術やweb標準について福岡で開催されたカンファレンス「HTML5 Tech Talk @Fukuoka」に招待されたので参加してきました。HTML5に追加されたaudio要素、video要素、canvas要素などの新しい機能やAPIについて多種多彩なデモを交えたスピーカの方々の講演でHTML5の新しい世界に触れることができました。 「HTML5って何？」、「実際どんなことができるの？」、「動いているサンプルを見てみたい」と感じている人もいるのではないでしょうか。そこで、著名な専門家の方々が今回の講演で用いたスライドやデモプログラムを紹介したいと思います。 詳細レポートは、以下から。開場前の様子。机といすが整然と並べられているだけでガランとしています。 会
PHPからTwitterに投稿するサンプルコード＆サンプルアプリ:phpspot開発日誌
Using the Twitter API with PHP and PEAR PHPからTwitterに投稿するサンプルコード＆サンプルアプリがzend.comのアーティクルで紹介されていました。 以前に紹介した、Services_Twitter を使っているようなのですが、非常に簡単に実施できるようです。 アプリにTwitter投稿機能を組み込みたい場合も、以下のコードで簡単かつスピーディに実装できますね。 <?php // include class include_once 'Services/Twitter.php'; try { // Services_Twitterインスタンスの初期化 // ログイン( ID, PASS を渡す ) $service = new Services_Twitter('indigozero', 'guessme'); // ステータス更新 $se
PHPで誰でも簡単Webサービス製作！でなんか作って公開した奴ちょっと来い - 甘味志向＠はてな
タイトルは出来れば関連する方に読んで欲しかったので、軽く釣り針にしました。すみません。:*) 最近はやりのヒウィッヒヒー（Twitter）でも、よく「○○ったー」みたいなサービスがばんばん登場してますね！ おかげでますますツイッターが面白い感じになってて、いい流れですね！ でも･･･ちょっと気になることが･･･ 最近「もうプログラマには頼らない！簡単プログラミング！」だとか･･･ 「PHPで誰でも簡単Webサービス作成！」だとか･･･ はてなブックマークのホッテントリで見かけますよね･･･ プログラミングする人が増えるのは素敵です！レッツ･プログラミングなう！ なんですけど･･･ ちゃんとセキュリティのこと考えてますか･･･！？ 『セキュリティ対策とか難しいし面倒くせーし、俺の適当に作ったサービスとかどうなってもイイしｗｗ』 いいんですいいんです！ 別にそう思ってるならどうでもいいんです！
オシャレにフォームのエラーをヒント表示してくれるjQueryプラグイン「Ketchup」:phpspot開発日誌
Ketchup Plugin オシャレにフォームのエラーをヒント表示してくれるjQueryプラグイン「Ketchup」。 次のように、Submit した時点でのエラー表示を吹き出しつきの枠をもってわかりやすく表示してくれます。地味にアニメーションする部分もいいです。 Validateというと、どういう値が正しいかという指定が必要なのですが次のように class に指定することで定義するようです。 class に指定するということで好き嫌いが分かれそうな気もしますね。ちょっと改造してもよさそうです。 <input type="text" class="validate(required, username, rangelength(3,20))" /> max, min, range, digits, mail, url など、基本的なバリデート指定は最初から実装されているみたいです。 関連
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
会員登録フォームを構築するポイント | ランサーズ社長日記
いいね！ 11 ツイート B! はてブ 734 Pocket 58 ここ2・3日、ひたすら色々なサイトの会員登録フォームやコマースサイトの購入フローを見ていました。 また、フォームのユーザビリティについて語っているブログやサイトをみて研究していました。 こうすれば登録数が劇的に上がる！とか、売上が上がる！といった方法はありませんが、少しだけユーザーに安心感を与えたり、ストレスを取り除いたりする方法はたくさんありますし、見ていたサイトでも登録しやすいサイトには共通点が多くありました。 少し量が多いですが、自分で意識的に行ってきたこと、登録しやすいサイトの共通点、ブログやサイトをみて参考になる点をまとめてみました。 1つ1つはよく言われていることで、大したことありませんが、こういった小さなディティールにこだわって行きたいと思います。ケースバイケースの側面も強いのですが、何かの参考になればと思い
オリジナルのメールフォームが専門知識不要で誰でも簡単に作れる無料サービス「まぐまぐ！かんたんフォーム」
メールマガジン配信サービスの最大手「まぐまぐ」が感想受付やアンケートなどに使える投稿フォームを無料で簡単にすぐ作成できる無料サービス「まぐまぐ！かんたんフォーム」を開始したとのことなので、どれぐらい簡単に作成できるのか実際に試してみました。自由記入欄以外にもチェックボックスやセレクトボックスなどの使用も可能で、各項目は「必須」か「任意」かという選択もできるようになっているとのこと。 実際に作ってみたサンプルなどは以下から。 まぐまぐ！かんたんフォーム - まぐまぐ！ http://form.mag2.com/ 上記ページにアクセスしたら「規約に同意しフォームを作成する」をクリック 今回はオリジナルで作成するので一番右端をクリック こんな感じで表示されます。作り方の詳細説明は一応ここに書いてあるので、それを参考にして作ってみましょう。 項目設定が終わったら「フォーム内容確認」をクリック それ
第11回 PCサイトとこんなに違う！携帯サイトのフォーム設計ポイントとは | ユーザー視点のウェブデザインガイド
その半面、携帯サイトの設計については、PCサイトとは異なるユーザー特性があるにもかかわらずノウハウは少なく、中規模以上のサイトであっても「とりあえず作っただけ」のサイトや、やみくもに見た目だけを新しく装ったサイトが多いのが現状である。 今回は、携帯サイトの設計、その中でも特にビジネス成果に直結するフォームについてピックアップし、携帯ユーザー特有の行動に対していかに対応すべきかを考えてみたいと思う。 さて、複数のブラウザを立ち上げて、画面を切り替えながら操作が可能なPC環境と違い、モバイル端末では一度サイトから離れると、戻ってくるのが非常に大変である。そのため、携帯サイトのフォーム登録はPC以上に「一発勝負」であることを強く意識する必要があるだろう。 まず、ユーザーの入力負荷を減らし、自動入力が可能な部分は可能な限り実装するなどの配慮を欠かさないようにする必要がある。さらに、「携帯特有の機能
無料トライアル！メールフォームレンタルサービス ふぉーむまん【Formman】
ふぉーむまんのメールフォームは SSL対応で広告表示なし！ ご登録後7日間は無料でご利用いただけます。 ふぉーむまんは、お問い合わせフォームや、注文フォーム、予約フォーム、 申し込みフォームはもちろん、日報の入力フォームや商品在庫の確認用の 入力フォームなど社内での事務的な用途で重要な「入力フォーム」としてもご利用いただいております。 設置したメールフォームに書き込み送信したお客様に自動的に返信メールを送る自動返信メール機能は標準機能としてお使いいただけます。 有料版ではアクセス解析のためのGoogleアナリティクスの利用も可能です。 フォームはメールフォームとして機能すると同時に、集まった情報を CSVファイルとしてダウンロードしてエクセルやGoogleスプレッドシートで 集計することが可能なのでアンケートフォームなどにもご利用いただけます。 ※エクセル、ExcelはMicrosoft®
会員登録の敷居を下げる入力フォームの作り方(PC編) - キャズムを超えろ！
本エントリは、20〜40代のPCをある程度使いこなしているユーザー向けの会員登録フォームの設計について述べたものである。ケータイサイトは含まないし、シニアも対象としていない。シニア向けUIについては(古いエントリだが)こちら "ユーザーID"と"メールアドレス" 減ってはきたものの、ユーザーIDとメールアドレスの両方を取るWebサービスがいまだに結構ある(ex. Remember the milk)。はてなやYahooAuctionのように「ユーザーIDがニックネームに相当するコミュニティサイト」は除くとして、ユーザーIDを一般客に公開しないにも関わらずIDとメルアドの両方を取る意図がわからない。 ユーザーIDとしてメールアドレスを使うメリットは 会員登録フォームの入力必須箇所が1個減る 好みのIDが取れない事件が防げる "ID忘れ"による機会損失/幽霊会員が減る 流石に自分のメアドは忘れ
JavaScriptでリアルタイム値チェックを簡単に行える「LiveValidation」:phpspot開発日誌
LiveValidation - Validation as you type Lets face it, forms are boring, validation is a pain. It’s time to inject some life into them, make them fun again... JavaScriptでリアルタイム値チェックを簡単に行える「LiveValidation」。 このライブラリを使ってできることは、examples にまとまっています。 数字、長さ、メールかどうかなど、値チェックに必要なものは殆どそろっているので簡単に実装できます。 コードは次のようにオブジェクト指向で非常にシンプル。 var sayHello = new LiveValidation( "sayHello", { validMessage: "Hey there!" } );
CSSで独自デザインされた検索ボックスを作成:phpspot開発日誌
HOWTO: spruce up your search box with CSS and a background image d’bug Very few designers appreciate the aesthetic of a text input field, and styling form fields cross-browser on any Web site can be a tedious and frustrating experience. CSSで独自デザインされた検索ボックスを作成。 次のような検索ボックスを作成するサンプルが公開されています。 画像は１枚だけで、構成は結構シンプルなつくりになっているようです。 デザインにこだわるなら、こういった部分もちゃんとデザインしたいですね。 具体サンプルのページ
ウノウラボ Unoh Labs: buttonタグでサブミットするあれこれ
CSSでいつも悩まされるのはクロスブラウザですけど、フォームでは特に面倒くさい要素が山盛りですよね。ボタンの文言を動的に変えたいから画像はなるべく使いたくないけど、だからといってブラウザのデフォルトのボタンとか、味気ないですものね。 今日は、フォームにつきもののボタンについて考えてみます。 私たちがボタンに求めるモノって、何でしょう。 データを送信（submit）する どのブラウザでも同じように見える 使い回しが聞く ボタンについている文言がどんなに長くなっても、水平方向の長さがフレキシブル 上記のようにサイズ的にフレキシブルであっても、見た目の美しさを阻害しない ボタンの大きさ＝クリックできるエリアの大きさ 画像がdiableされていても使用可 CSSがdisableされていても使用可 ボタンのように見えて実はただのリンクの時のもある これらの要求を解決してくれる方法が複数出
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.designwalker.com/2010/05/wireframe-resource.html
IDEA * IDEA