はてなブックマーク

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

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

MySQLのエクスポートファイルを使ってワードプレスのデータベースを移行させたので、その方法を備忘録がてら紹介します。 サーバーは変えずにデータベースの移行だけを行いました。 ですが、せっかっくなのでサーバー引越し時のように、説明していきたいと思います。 新しい移行先サーバーには、ワードプレスはインストール済みとします。 この時移行先サーバーには、現状のワードプレスフォルダ丸ごとダウンロードしてから、移行先サーバに全てアップロードして下さい。 画像をアップしている場合は画像が表示されなくなりますし、プラグインなどのインストールが面倒となるかと思うので、新たなワードプレスはインストールしない方がいいと思います。 後はデータベースの移行のみです。 まず、現状のデータベースのデータを書き出し(エクスポート)ます。 1.PhpMyAdminへログインし、左側のメニューからエクスポートしたいデータベ

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

一段上のデザイン作品をつくりたい。そんなデザイナーへ、最近公開されたクールなフォトショップチュートリアルを紹介します。 15 Fresh Photoshop Tutorials for Designer 海外記事でよくあるフォトショップのチュートリアルでは、非常にクオリティの高いデザイン作品の作り方を、丁寧に説明してくれています。 グラフィックデザイナーやウェブデザイナー。デザイナーと呼ばれる方や、カメラマンにとってフォトショップは必須と言っていい優れた写真加工ツールです。 そんなPhotoshopで、いつもと違うちょっとすごいデザインをしたい！というときに学べそうな、 最近公開された、クールなフォトショップチュートリアルが「MachoArts」で15コ紹介されています。 Create a Fantasy Miniature World in Photoshop | Psdtuts+ Ph

最近のウェブデザイントレンド、リボンやバッジを使ったデザイン例と、無料でダウンロードできるPSDファイルを「DesignModo」より紹介します。 引用元: Best Design Examples of Ribbons and Badges, Free PSD’s – DesignModo 海外サイトで特によく見かける「リボン」や「バッジ」を使ったウェブデザイン例 リボンやバッジは、クラシカルなデザインのサイトに使用しているのをよくみかけます。 サイトに立体感や柔らかさを与えたい時にも効果的で、クオリティの高い印象を与えられます。 Run do to-do, iPhone app for TO-DO services. Ebridal Ryan O’Rourke—Ideation & Interface Design One thing that matters WPCoder – We

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 東大阪なび概要 ※ユーザー目線ではなく制作者としてのサイト概

自分用に、よく使うけど忘れやすいスタイルシートをリスト化してみました。 CSS は HTML で表現可能と考えられるデザインの大部分を実現できる要素を取り入れつつ、新たなデザイン機能を備える。 htmlなWebサイトをデザインする際には必須なのがこのCSSです。 いくつもサイトのコーディングをしていると、自分のCSSテンプレートを持っている人も多いと思います。 僕もよく使うものと忘れやすいスタイルシートを、自分用にリスト化してみました。 せっかくなのでシェア。全部で16のリストになっています。 こんなのも便利だし使えるよ！ というCSSがありましたら是非教えてください。 リセット用CSSの設定 bodyの設定 ベースとなる箱の設定 テキストリンクの設定 別窓リンクの設定 画像の透明度の設定 選択したテキストの見栄えを変える設定 自然改行しない時に、改行させる 画像のロールオーバーの設定 必

[WordPress]投稿記事のURLの後ろに？type=○○○ とつけて通常とは違うテンプレートを読み込む ワードプレスで、シングルページ(投稿記事)に適用するテンプレートを変更する方法。 dogmap.jp さんで、僕が前々からワードプレスでしたかったことを書かれていたので、参考にさせていただき実装してみました。これはとてもやりたかったことだったので、ほんとうれしかったです。 忘れないように実装方法をメモしておきます。 これはWordPressでポータルサイトを構築するには欠かせない機能だと思いますよ。 パラメータでシングルページのテンプレートを変更 : dogmap.jp 簡単に言うとsingle.phpにいろんなページをくっつけることができるようになります。 実装例：こんな感じに実装したい！ 例えば、通常の投稿ページにカスタムフィールドで地図情報や、メニュー、写真などのギャラリーな

たった3分くらいの時間と3ステップで可能な、 Photoshopを使って写真をイラスト風にする簡単な方法を解説。 結婚式のウェルカムボード用のデザインを、作成することになりました。 ウェルカムボードには、写真をイラスト風にデザイン、印刷したものをボードの上に貼り付けることになりました。 そのデザイン工程で、写真をイラスト風にする簡単な方法が見つかったので、その方法を紹介します。 このチュートリアルは、特に変わったテクニックなどは使わずにフォトショップの標準機能で作成できます。 今回のチュートリアルで使用している写真素材は 「写真素材 足成【フリーフォト、無料写真素材サイト】」 の写真を使用させていただいております。 こういう感じに仕上がります。 ビフォー(加工前) アフター(加工後) イラストっぽくなってますよね。 制作環境 Windows XP 使用ソフトはAdobe Photoshop

携帯サイト(ガラケー、フューチャーフォン)に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」 このプラグイン、普通にワードプレスをブログとして使用する際には特に必要ないプラグインなのですが、ワードプレスでポータルサイトなどを構築した際には非常に使えるプラグインなのです。 というか絞込み検索が可能なプラグインは今のところこれ