ブックマーク / kachibito.net (14)

  • Webサイトにおけるユーザービリティの復習をしたので、よくチェックするポイントをリスト化した - かちびと.net

    ユーザービリティに関して少し復習したので メモっておきます。初心忘れるべからずという 事で・・・Webサイトは基的にユーザビリティ を考慮したレイアウトやコンテンツが理想です。 もちろんケースバイケースではありますが、 これは全共通して言える、という事を忘れない ようにメモ書き。 というわけで、申し訳ないですけど目新しい事は何一つ無い内容です。 そもそもこのブログ自体ユーザビリティを考慮した設計とは言えません(「やっちゃダメなこと」もしています)ので全然説得力ない感じです。 いろいろとテスト&エラーをして行きたいのでご了承下さい。 はじめに 正しいユーザビリティはコンテンツによってケースバイケースだと思いますが基的には僕はヤコブ・ニールセンの考えに従っています。 全ての項目は「すべてが正しい」ものではありません。100のサイトがあれば100通りのユーザビリティが考えられるはずです。場合

    Webサイトにおけるユーザービリティの復習をしたので、よくチェックするポイントをリスト化した - かちびと.net
  • レイアウトや配色等をインタラクティブに設定できるWordPressテーマを作る為のフレームワーク・PressWorkちょっとやばい - かちびと.net

    その場でインタラクティブにレイアウトや配色を 調整出来るようなテーマを作る為の開発者向け WordPressテーマフレームワークのご紹介。 久々に凄いなーと感じて脊髄反射的に記事に。 PressWorkで作られたテーマならユーザーが 直感でレイアウトを作る事が出来ます。 以前、直感でWebサイトを作成できるフリーWebサービスという記事を書いたんですが、このサービスのように、インタラクティブにレイアウトやカラーなどを決める事が出来るWordPressテーマ。というだけでも凄いんですが、これがフレームワークとして配布されているのでちょっと驚きでした。 HTML5で出来ています。管理画面に入る事も無く、FTP不要で直感的に、インタラクティブにレイアウトを組む事が出来ます。やばい。 以下に解説を少し。 テーマをアクティブにする 最初にテーマをアクティブにします。外観でPressWorkを選択する

    レイアウトや配色等をインタラクティブに設定できるWordPressテーマを作る為のフレームワーク・PressWorkちょっとやばい - かちびと.net
    sevenbluesea
    sevenbluesea 2011/07/13
    直感的にCSSをいじれる?
  • 最近よく使ってる、Web制作に役立つWebサービス的なやつ

    少し前に聞いてくれた方がいたのでついで にシェアしてみます。個人的に最近よく好ん で使っている、Web制作に役立つWebサー ビスみたいなものをご紹介。全部既出で 珍しいものは無いんですけど、一覧にする のもたまにはいいかもですね。 というわけで、場合によっては誰得な記事ですけどご了承下さい。僕がここ最近でよく使ってるWebツールを古いのから新しいのまで、順不同でご紹介していきます。 web計。 → 黄金比・白銀比をサクサク計算 計算が面倒な黄金比や白銀比を、数値を入力するだけでサクサク出してくれます。動作も軽くてストレス無しです。 web計。 simplelib → よく使うjQueryコードをパッケージで配布 めっちゃ楽です。jQueryで作りたい機能だけを選択して、1つのjsファイルにパッケージにしてくれますよ。ページスクロールとかタブとか需要の高いものが揃っています。ちょっと機能を

    最近よく使ってる、Web制作に役立つWebサービス的なやつ
  • jQuery Mobile使用時によく使うマークアップで日本語サンプルを作ったので配布します - かちびと.net

    簡単なものですけど、jQuery Mobile でのマークアップ時によく使うっぽい UIのサンプル作ったので配布します。 簡単なチートシート代わりになるのでは 無いかと思ったのでシェアしてみよう かと。良かったら使ってください。 というのも、JQMの日語サンプルの配布先を見かけなかったので、なかなかお困りの方もいらっしゃるんじゃないかなと。調べるの面倒ですし、手元にサンプルコードあったほうが何かと便利ですよね。 というわけで、以前マークアップサンプルの記事書いたときに作ったサンプルサイトに手を加えた物を丸ごと配布します。 流石にかなり出てるので今更説明不要かもですけど、ざっくり説明するとWebサイトをスマフォ向けに簡単に出来るjQueryプラグインです。 以下のサンプルで使用しているファイルが丸ごと梱包してあります。 サンプル※別窓 いちおうキャプチャ。 目次 サムネイル付きのサンプルと

    jQuery Mobile使用時によく使うマークアップで日本語サンプルを作ったので配布します - かちびと.net
  • css3のtransitionプロパティでアニメーションサンプルをいろいろ作ってみた - かちびと.net

    css3のアニメーションプロパティ、transitionがとても面白いので何となくアニメーションのサンプルを色々と作ってみました。まだ対応ブラウザは少ないですが、将来の為に予習してみたのでシェア。 css3のtransitionプロパティは変化を与えるプロパティです。アニメーションを実装できるプロパティはtransitionとanimetionがあり、後者のほうが「アニメーション」としての位置付けっぽいのですが、今回は何となくtransitionを使用しました。 プロパティ:-webkit-transition 対応ブラウザ:webkit系(GoogleChrome、Safari等) JavaScript:未使用 (※ソース閲覧の部分はjsを使っています) 一応アニメーション以外(角丸など)は-mozも入れています。 サンプルなので「-webkit-transition: *s ease-

    css3のtransitionプロパティでアニメーションサンプルをいろいろ作ってみた - かちびと.net
  • 写真の撮影技法とか加工技法に関して少し調べたのでメモ

    最近よく見かける写真撮影技法に 関して調べ物をしたのでメモ的に。 専門家では無いので基的にネット 頼りの知識でしか無いです。僕も 勉強がてら調べた程度ですので、 特に目新しい情報ではないです。 僕が最近よく見かける写真撮影技法や加工技法を調べてたので備忘録。素人なので内容は特に新しいものではないです。尚、個人的な検索用ですので、存在する全ての撮影技法や加工技法を掲載している訳ではありません。 ※例に挙げてる画像は僕が撮った写真です(OLYMPUS E-520を使用) ハイダイナミックレンジ(HDR) 通常の写真技法に比べてより幅広いダイナミックレンジを表現するための写真技法の一種。常の写真では表現のできない広いダイナミックレンジをヴィジュアルイメージとして通常の狭いダイナミックレンジの中に定着することができ、通常の写真と比較すると肉眼に近い画像とすることができる。反面、通常の写真ではあり

    写真の撮影技法とか加工技法に関して少し調べたのでメモ
    sevenbluesea
    sevenbluesea 2011/04/20
    おぉー!!こういう写真系のやりたい!
  • WordPressを使ったWebサイトにSEO施行する際に役立つっぽいカスタマイズハック

    久々にSEOの記事。以前書いたSEOの カスタマイズハック記事があるのですが、 あれから2年近く経つので新たに記事と して、ここに付け加えておくことにします。 SEO自体、情報が不確かなものなので、 これを行えば最適化出来る!という類の 情報は載せません。 SEOもハサミと同様、結局は使い方次第だと思いますのでコンテンツやターゲットによっては役に立ったり立たなかったり、ということがあるかと思いますが、同時にそれが混乱の元にもなってしまいがちです。 ですので、今日はSEOに効果的なカスタマイズではなく、自分でSEO施工をしやすくする、というカスタマイズ方法を書いておきます。Webマスターのアイデア次第で効果のあるハックにもなるし、効果のないハックにもなると思います。 コード自体は基的に普通のテンプレートタグを使用してるものが大半です。全部施行しても何の意味も無いので、使えそうなハックがあっ

    WordPressを使ったWebサイトにSEO施行する際に役立つっぽいカスタマイズハック
  • WordPressを使ったWebサイトでfunctions.phpによく書いてるやつ

    お問い合わせ頂いたので記事にします。 WordPressのfunctions.phpは便利なの はよく分かりますが、結局何が出来るの か分からないのでこんな事できる、という のがあれば教えて欲しいとのことでした。 僕も詳しくないので僕も教えて欲しいんです が、一応書いてみます。 基的にfunctions.phpはちょっと機能を追加したい、という時に使うものだと思うのでデフォルト機能やプラグインで済むならそうしたほうがいい気がしますのであまり拘らなくてもいいかと思います。 それでも、やはりお仕事ではよく追加する機能はありますのでそれをご紹介します。 ※ウィジェットは割愛しますね カスタムポストタイプadd_action( 'init', 'create_post_type' ); function create_post_type() { register_post_type( 'exam

    WordPressを使ったWebサイトでfunctions.phpによく書いてるやつ
  • インスピレーションを刺激させたい時に大抵見てまわるWebサイト集

    インスピレーションを向上させたい 時に僕が見てまわるWebサイトを ご紹介。というか基的に殆ど閃く 事は皆無に等しいレベルでナンセ ンスな人間なのでドーピング的に 綺麗なものを見るようにしています。 というわけで、発想力の有る方には全く役に立たないエントリーです。個人的には勉強を兼ねたWebデザイン、フォトグラフィのためのインスピレーション向上が目的ですが、「発想力を上げる」というのは様々な業種の方にも通ずるものがあるのではないかと思っています。 パッと見、一貫性の無いまとめですが、どのサイトからもアイデアを貰ったことがあるのでそういったWebサイト集になります。順不同。 Dribbble 世界中のデザイナーの作品が見れるサイトです。新しく作ったコンテンツを公開してくれます。色やカテゴリで探せますが、どれも素敵なのでダラダラ見てるのも楽しいです。 Dribbble We heart it

    インスピレーションを刺激させたい時に大抵見てまわるWebサイト集
  • スマートフォン向けのJSフレームワーク・Wink Toolkitがバージョンアップしてより素敵になったよ

    以前ご紹介した、スマートフォン向けの JavaScriptフレームワーク、Wink Toolkit がバージョンアップしたんだぜ、と開発者 さんからわざわざお問い合わせ頂いたの でご紹介。以前もかなり豊富なUIでとても 有意義なフレームワークだと感じましたが、 今回はUI面が特にパワーアップ。 Wink Toolkitがバージョン1.3になって機能もいくつか追加されました。3ヶ月間、UIの改善にかなり力を入れてくれたようで、スマフォにかなり合わせてくれましたよ。 jQuery Mobileライクなインターフェースになりました。もともとUIエフェクトの評価は高かったWink Toolkitですが、全体的なデザインが見直されてかなり垢抜けた感じです。 尚、以前の機能やUIは過去記事をご参照下さい。 Wink Toolkitが割と良かったので日語サンプル作った Demo 前回はほぼ全てのデモを

    スマートフォン向けのJSフレームワーク・Wink Toolkitがバージョンアップしてより素敵になったよ
  • カスタマイズやプラグイン等、今年に入ってブクマしたWordPressの関連記事まとめ・国内編 - かちびと.net

    信じがたいですが、もう3月も終わりそう ですね。なんでしょう、このスピード感。 災害の影響もあってか、凄く時間が過ぎる のが早い気がします。さて、今年も1/4が 終わろうとしてるのでWordPress関連で ブクマした記事をまとめました。取りこぼし てないか、確認がてら如何でしょう。 というわけで今年に入ってブクマしたWordPress関連の記事・国内編です。海外編があるか分かりませんが今日は国内のみの記事に絞っています。 尚、プラグインのまとめ記事的なものはあまりブクマすることは無いのでここにも有りません。ご了承下さい。表題にもあるようにカスタマイズ関連記事ですが、そうでないもの僅かにあります。適当ですみません。順不同です。 WordPressでのページ表示高速化の色々まとめ バージョンが上がるに連れてパフォーマンスも向上してる気がしますが、それでも早いにこしたことないですよね。ほとんど

    カスタマイズやプラグイン等、今年に入ってブクマしたWordPressの関連記事まとめ・国内編 - かちびと.net
  • iPhoneやiPadに自動対応させるWPプラグイン・WPtapを導入したけど文字化け箇所があったので対処法をメモ - かちびと.net

    さて、3連休中ですが、今日もWebのネタ。 昨日、ご紹介したWordPressモバイル対応 プラグイン・WPtapをこのブログに導入しまし た。今更スマートフォン対応したのかよ的な 印象も否めませんが、導入時の事をいくつか メモとして残しておきます。導入のきっかけに なれば幸い。 基的に導入にあたり、大きな問題はありませんでした。当、オススメのプラグインです。(※詳しくは昨日の記事をご参照)ただ一点だけ、デフォルトのテーマで、タイトルを文字数で省略しているのですが、そこが文字化けしてたので対処法を書いておきます。 文字化けを直す ↑こんな感じで文字化けってます。ご紹介した手前、「なんだよ文字化けで使えねー」とか言われるのもアレなので文字化け対策を書いておきます。 直す箇所 wp-content/plugins/wptap/themes/News Press/にあるindex.phpとa

  • 「Webデザイン用のフリー素材をシェアしよう」がコンセプトのWebデザイナー専用コミュニティ・Designmoo - かちびと.net

    無料でハイクオリティなPSD素材や フォント、テクスチャなどWebデザイン に欠かせないリソースを無料でDL 出来るコミュニティサイト・Designmoo のご紹介。コミュニティに参加せずとも 使わせてもらえますのでリソースサイト として覚えておくといいかもしれません。 「あなたの役に立つか分からないけど、よかったらリソースをシェアしよう」とのこと。フォントやテクスチャ、PSD素材やブラシなど多くのWebデザイン向け素材が無料で手に入ります。メンバー登録も不要ですよ。 メンバーになるには招待が必要みたいですが、素材のダウンロードは誰でも登録不要で出来るみたいです。 いくつかピックアップ Dyslexia 可愛らしいビットマップフォント Dyslexia 4 minimalistic notice styles ポップアップを優しい色合いに。 4 minimalistic notice st

    「Webデザイン用のフリー素材をシェアしよう」がコンセプトのWebデザイナー専用コミュニティ・Designmoo - かちびと.net
  • [2010年度版] 今年に入ってブックマークした無料のソフトを整理・16個+まとめ記事いくつか - かちびと.net

    今日は2010年度版のフリーソフトまとめ です。今年、ブックマークした無料のソフト を整理しました。結局残ったのは16個と まとめ記事がいくつか。折角整理しました のでついでにまとめてご紹介してみます。 かなり主観が入っていますので内容は 偏っていると思います。 という訳で、2010年度版・無料でDL出来る素敵なソフトのまとめです。試してみて凄いなーと思ったもの、まだ試していないものなど混在していますがご了承下さい。 日語で紹介してくれている記事にリンクしていますので詳細はそちらでご確認下さい。 順不同です。 【追記・当方WinユーザーでMac持ってないです。このまとめもそんな感じです】 複数のパソコンで簡単にiTunesを同期できる『MediaRover』 これはなかなか便利そう。試す機会がまだ無いので試していませんが、いつかテストしてみたいです。 複数のパソコンで簡単にiTunesを

  • 1