はてなブックマーク

初めてのiPhone・Andoroidアプリデザイン制作時に、チェックした書籍やサイト(UIパーツやデザインギャラリー)を紹介。 iPhoneアプリのデザインをさせていただいたので、その時の注意点などもまじえつつ、参考にしたサイトや書籍を書いておきます。 アプリをデザインする前に読んでおきたい本 モバイルアプリのデザインということで、ディスプレイの小ささ、タッチの難しさなどから、一番にユーザビリティ、ユーザインターフェースを気にしなければ。というところから考えました。 そうなると、ネットの情報だけでは不安です。なので書籍選びからはじめました。 書籍は以下の2点を購入しました。 アプリのデザイン本となると、あまり発刊されていないようですが、以下2冊は非常に役立ったのでオススメです。 デザインをする前に読んでおきたい記事 アプリデザイン時の必要な基礎的な知識、ユーザーインターフェースに関する知

ウェブデザイン時、参考サイトを探す際にお世話になったWebデザインギャラリーサイトを紹介します。 今年もあとわずかですね。 昨日、今日が仕事納めの方も多いかと思います。お疲れ様でした。 私はデザイナーという感じではないし、ゼロから生み出すのが苦手です。 なので、センスのいいウェブデザインをまとめてくれている、 ウェブデザインギャラリーサイトには、今年もほんとにお世話になりました。 ここで紹介しているギャラリーサイトは、私好みのデザインを集めているサイトが多いと思います。 「シンプルで洗練されている」という感じのウェブデザインが好きな方にはオススメの、ギャラリーサイトを14サイト紹介します。 縦長のwebデザインギャラリー・サイトリンク集｜MUUUUU_CHANG Web DESIGN Showcase Webデザインギャラリー | I/O 3000 Webデザインリンク集 Webデザインポ

This domain may be for sale!

WordPressの記事リンク先の「続きを読む」リンク先の #more を削除する方法 を忘れちゃうんでメモ代わりに書いておく。 デフォルトで「続きを読む」のリンクが、 http:www.hoge.com/blog/hoge#more-○○○ という、ページ内リンクがついたものになるのでそれを解消する方法です。 追記：2011.01.31 別の方法を追記しました。 デフォルトでは「続きを読む」のリンクが個別記事へのパーマリンクに #more-○○○ (※○○○ の箇所は数字が入る。) というページ内リンクがついたものになってしまうので何だかやな感じ。 この #more-○○○ を消して記事へのリンクに変更するには /wp-includes/post-template.php を以下のように変更。 $output .= ' <a href="'. get_permalink() . "#mo

木の要素をデザインにうまく取り入れてクオリティアップ！高解像度で種類豊富な無料の木材、木目テクスチャを「DesignModo」より紹介 引用: 115+ Professional High Resolution Wood Textures – DesignModo 木材はインテリアデザイン、建築、ウェブデザインおよび多くのようなすべての分野で広く使用されています。 最近では視覚的に創造的な外観を与える背景として、ウェブサイトで木のテクスチャを使用することは一般的になっています。 ウェブデザインに使用されるテクスチャには様々な種類がありますが、木材のテクスチャは、ウェブ関連のデザインに最も合う一つです。 様々なパターンの木材の素材が紹介されているので木目、木材素材をお探しの方におすすめです。 Wood Textures ver 1 45 Wood Textures by ~Jammurch

This domain may be for sale!

jsや各種プラグインを使わずCSSの記述のみで、別ウインドウで開くリンクにアイコンを表示する方法 別窓リンクを開くのに、「target」属性が指定されており、その値が「_blank」であるものに限定してアイコンを表示します。 以前から別窓を開くリンクの横にアイコンを表示したいと考えていたのですが、 JavaScriptや、WordPressで言うとプラグインなんかで可能だけど、できるだけjsやプラグインを使いたくないという考えが僕にありまして。。 で、cssで実現可能ということで、今さらながらに知ったセレクタなんですが、実装してみましたよ。 以下のようにスタイルシートを記述します。 a[target="_blank"] { background: url(sample.gif) no-repeat right center; padding-right: 18px; } アイコンの位置を左

木目をウェブデザインに取り入れたい時に参考にしたい、国内外の32サイトを紹介します。 デザインに携わる方なら、ウェブデザイン、グラフィックデザインなどの制作時に、木の素材をデザインに取り入れたいと考えることは多々あるかと思います。 木が私たちに与える印象は温もりや安心、懐かしさ、癒やし、優しさなどです。 ウェブデザインにそういった印象を持たせたい場合には、木目調のテクスチャなどの素材を盛り込めばよいのではないでしょうか。 以下より、木目をウェブデザインに取り入れる際に参考にしたい、国内と海外のウェブサイトの例を計32紹介します。 小倉にただ一つの本格アイリッシュパブ | Irish Pub Booties… 函館カール・レイモン～おいしい本格派ハム・ソーセージ。お取り寄せやギフトにどうぞ～ 暮らしと、写真と。refocus[+] 自転車ロック鍵・サドルカバー・裾ベルト【nnf】 5050　

Webデザイナーへオススメな、ハイクオリティで無料でダウンロードできるUIキットを「Noupe Design Blog」より紹介します。 20 Free Top Shelf UI Kits for Web Designers – Noupe Design Blog 『ウィキペディア（Wikipedia）』引用 UIとは？　ユーザインタフェース (User Interface) は、機械、特にコンピュータとその機械の利用者（通常は人間）の間での情報をやりとりするためのインタフェースである。ユーザインターフェイス、ユーザインターフェースと書かれることもある。 ウェブデザイナーにとって、フォーム用のボタン等の細かいUI(ユーザインタフェース)要素のデザインは非常に大事な箇所です。 しかし簡単に終わらせることのできない作業のため、とても時間が削られます。 そんなUI要素が無料でダウンロードできる、

taka – Fotolia.com ユーザインターフェースも最適化され、優れたスマートフォンサイトのデザイン例を紹介します。 70+ Beispiele für mobile Websites // Blog.Tocki | Tilman Ockert, Stuttgart 近年、ウェブデザイナーの仕事範囲は、スマホ専用サイトやガラケーサイトのデザイン、ウェブアプリなどのデザインという仕事が増えたため、明らかに広がりました。 最近ではスマートフォンユーザーが急激に増えているため、スマートフォンでも快適にサイトを見てもらえるように対応し、ユーザインターフェースも最適化しておきたいところです。 そうなると、スマホサイトデザインの参考に様々なサイトを見てみたいところですよね。 しかし、スマートフォンサイトはデスクトップと違って、インスピレーションを受けるための様々なサイトのデザインを、探して見

「東大阪なび」という地域密着のポータルサイトを制作しました。 2010年の夏ごろから、β版として公開し、2010年末に本オープンしていたのですが、紹介させていただきます。 東大阪市を楽しむタウン情報サイト「東大阪なび」 後々、WordPressでポータルサイトの構築方法。 みたいな感じでブログも書きたいと思っていますが、とりあえず紹介しておきます。 「こんな機能がありますよ！こういう目的のサイトです！便利に使ってくださいね！」 という風なユーザー目線での紹介では、わずかながらでもこのブログを読んでくださっている、Web制作者の皆さんには面白くないと思うので制作者目線でこのポータルサイトを紹介したいと思います。 東大阪なびは今も毎日修正、改善しています。 なのでエラーや表示の悪さなどあるかと思いますが、優しく見てあげてください。w 東大阪なび概要 ※ユーザー目線ではなく制作者としてのサイト概

This domain may be for sale!

This domain may be for sale!

This domain may be for sale!

携帯サイト(ガラケー、フューチャーフォン)にmixiチェックとtwitterつぶやくボタンを設置する方法。 いまさらかも知れませんが、書いておきます。 時代はスマートフォンだよ！とか言わないでくださいね。 Twitterでつぶやくボタンや、mixiチェック、facebookイイネ！などのソーシャルブックマークボタンは、 PCサイトでは当たり前と言っていいくらいよく見ますよね。 携帯用のサイトでも見かけるかと思いますが、 今回は、一般的なTwitterとmixiチェックを設置したのでその導入・設置方法を紹介します。 mixiチェック、Twitterツイート画像を用意 mixiチェックのボタン画像はこちらにあります。↓button-1の画像を使用しました。 mixi チェックボタンの設置　技術仕様 << mixi Developer Center (ミクシィ デベロッパーセンター) 仕様や、も

ワードプレスで構築したポータルサイトに使用中のプラグインを24+2個紹介します。 不必要なプラグインがないか、見直しをしていたのですが、記事にして紹介することにしました。これを機会に、あなたのワードプレスで使用中のプラグインを見直してはどうでしょうか。 現在東大阪なびで使用中のプラグインを、簡単に説明をつけて紹介します。 「東大阪なび」は、地域情報ポータルサイトなのですが、 今回紹介するプラグインは、ポータルサイト以外でもとても使える便利なプラグインです。 各プラグインには一応リンクを貼っていますが、 ほとんどが自ワードプレス内のプラグイン検索をすると見つけられます。 WordPress日本語版で標準装備のプラグインも含め、計24+2個と多めですがどれも使えるプラグインです。 では以下より紹介していきます。 広告管理に最適。 AdRotate テキスト、画像、バナー等をローテション表示。

カテゴリごとにサイドバーを変えたかったので、簡単な変更方法をメモしておきます。 ワードプレスでサイト構築していて、各カテゴリーとそのカテゴリに属する(スラッグが同じ)投稿記事のサイドバーを、どうしても変更する必要がありました。 なのでその変更方法をシェアがてらモしておきます。 例えば、ブログカテゴリ・ニュースカテゴリ・メニューカテゴリ という3つのカテゴリがあったとします。 その3つのカテゴリのサイドバーを、それぞれのカテゴリ用のサイドバーを読み込むようにします。 さらにその3つのカテゴリに属する投稿記事もそれぞれのサイドバーを読み込むようにします。 実装内容は以下のような感じになります。 ブログカテゴリ・ブログカテゴリのシングル記事 →ブログカテゴリのサイドバーを表示 ニュースカテゴリ・ニュースカテゴリのシングル記事 →ニュースカテゴリのサイドバーを表示 メニューカテゴリ・メニューカテゴ

[Google]WordPressでプラグインを使わずGoogle Analytics APIを使って人気記事ランキングを表示する ワードプレスでプラグインを使わず「Google Analytics API」を使って、アクセスランキングを表示してみる。 ブログをある程度の期間やってると人気のページや、アクセスの多いページを表示したくなりませんか？ ワードプレスだと「wordpress プラグイン 人気記事ランキング」なんかで検索すると色んなプラグインがでてきて簡単に実装することができます。 しかし今回は、プラグインを使わず、グーグルアナリティクスのデータを使って人気記事ランキングを取得、表示する方法を覚書がてら紹介したいと思います。 プラグインを使わず、Google Analytics APIを使って人気記事ランキングを実装するには、Google Analytics APIを使用してデータ

タイポグラフィを用いた、素晴らしいデザインインスピレーションを与えてくれるアートな34作品 文字を基盤とした、素晴らしいデザインイメージばかりです。 今回のデザインインスピレーション集はタイポグラフィアートをテーマにしました。 文字をかっこよく、クールに！ はたまた、かわいらしく、キュートに！ なんて感じに、様々なイメージで文字をデザインできるようになると、一気にデザイン力があがったり、デザインの幅が広がったりするのではないでしょうか。 ？タイポグラフィとは？ – フリー百科事典『ウィキペディア（Wikipedia）』引用 印刷物の読みやすさである可読性や、視認性、そしてその美しさを得るために、 活字の配置・構成やその属性すなわち書体、字体の大きさ（ウェイト）、行と行との間隔（レディング）、文字と文字との間隔（カーニング及びスペーシング）、印刷紙面上での活字が占める領域の配置・構成（レイア

ワードプレスでカテゴリを複数選択して投稿した際に、任意の指定した親カテゴリの子カテゴリのみの表示方法をメモしておきます。 親カテゴリがそれぞれ違う、子カテゴリを複数選択した際に、選択した全てのカテゴリが表示される問題を解決する方法。 記事に表示する子カテゴリの親カテゴリの指定をしたいと思ったのです。 カテゴリを複数選択すると、通常のカテゴリ名取得コードだと出力時に選択した全てが表示されます。 例えば次のように、 親カテゴリがそれぞれ違う3つの子カテゴリ「赤色」「りんご」「ブログ」全てにチェックを入れて投稿すると、出力時に選択した全てが表示されます。 そうではなくて、表示するのは任意の指定した親カテゴリの子カテゴリのみにしたい時はありませんか？ 記述は以下のように。 指定する親カテゴリが「色」というカテゴリでカテゴリidが7の場合。 <?php if(have_posts()) : whil

ワードプレスサイトで日々の更新を楽にする「ヘッダ内最適化」をする方法。 プラグイン「All in One SEO Pack」などのプラグインを使わずにできるヘッダ内SEOのカスタム方法を紹介。 ワードプレスでSEOするなら必須といってもいい、プラグイン「All in One SEO Pack」 便利なのですが、僕は少しでも＜head＞内はスッキリキレイにしたいので、できるだけプラグインは使いたくないのです。（当サイトでは沢山使ってますが。。） 今回はその「All in One SEO Pack」などのプラグインを使わずに自分でワードプレスをカスタムしてできる、ヘッダ内の最適化を説明していきたいと思います。 題して「ワードプレスでヘッダ内最適化」　大げさなタイトルですが。。。 「All in One SEO Pack」などを使っての更新さえ面倒だという方にオススメです。 「ワードプレスでヘッ

[JavaScript]ブログにTwitter、facebookいいね!、はてブボタン等をカンタンに設置できるプラグイン「jQuery.socialbutton」 Twitter、facebookいいね!、mixiチェック、はてブ等のソーシャルボタンをカンタンにブログなんかに設置できるプラグイン「jQuery.socialbutton」 ブログをしている人はほとんどが設置しているであろう、 各種ソーシャルボタンをとっても簡単に設置できるのがこのプラグインです。 Twitter/facebookいいね/mixiチェック/mixiイイネ/GREEいいね/Evernote/はてブのボタンを超カンタンに作れる jQuery.socialbutton プラグインを作ったよ | アイトランス株式会社 設置方法はとっても簡単ですし、 制作者さまのサイトでももちろん、設置方法は書かれているのですが、 少し

ワードプレスでサイト内検索をかけた時の、検索結果数を取得するためのphpコード。 メモしておく。 ワードプレスでサイト内検索をした時に、検索結果数を表示させる方法は以下のように記述。 <p>「<?php echo wp_specialchars($s, 1); ?>」の検索結果： <?php echo $wp_query->found_posts; ?> 件</p> 「○○」の検索結果： ○○件　のように表示されます。 search.phpの表示させたい箇所に記述してください。 ループ外に書かないと、記事数分表示されるので注意。

[WordPress]プラグイン「WP Custom Fields Search」を使用すると＜head＞内に自動的に挿入されるCSSを解除する方法。 ワードプレスプラグイン「WP Custom Fields Search」使用時に、＜head＞内に自動的に挿入されるCSSを解除する方法。 「WP Custom Fields Search」を使用すると＜head＞内に自動的に外部CSSが挿入されます。 その自動的に挿入されるCSSを解除する方法をメモしておきます。 カテゴリーやタグでの絞込み検索が可能なプラグイン「WP Custom Fields Search」 このプラグイン、普通にワードプレスをブログとして使用する際には特に必要ないプラグインなのですが、ワードプレスでポータルサイトなどを構築した際には非常に使えるプラグインなのです。 というか絞込み検索が可能なプラグインは今のところこれ