タグ別アーカイブ: デザイン

[fan3] 財団法人系紹介サイト



 

ワードプレスの構築から、デザイン、フラッシュ制作、ロゴデザイン、コーディングまでをやった仕事になります。

最終的に、納期は1ヶ月弱でした。

テーマのPHP部分若干手を入れています。ほとんどプラグインで処理しています。

使用アプリ「Artisteer 2」「Adobe Dreamweaver CS4 」など



[web] 洗練されたデザインを学ぶ(メモ)



 

最近の流行りも見ておかないと、おいていかれるので、見てみる。



このサイト、有名ですか?とても良いですね。

コリス
http://coliss.com/

で、上記サイトから行けたサイト。

ボタンのデザイン
http://www.smileycat.com/design_elements/buttons/

カッコいいねえ。





[WP] シンプルなデザインテーマ



 

ワードプレス用、シンプルな雰囲気のデザインテーマデータです。

黄色と緑色を用意しました。要望があれば、他の色も作ります。



シンプルグリーン
SimpleGreenダウンロード


シンプルイエロー
SimpleYellowダウンロード


使用にあたってはダウンロードページをご確認ください。


ちなみにこのテーマはこちら(↓)のソフトで作っています。

Artisteer - Web Design Generator



[WP] ホームページっぽい作りにするには?



 

ワードプレスをホームページ化するのに関連しそうな情報を集めてみよう。
今までの記事も参考になるのが、あると思うのでそっちも見てみてください。
この記事より後に書いた関連記事へのリンクを下に追加しました。

僕自身、プログラマーじゃないし、デザインリニューアルがやりやすいように、
テーマ(PHP)自体への書き込みは極力少なく単純にしたいです。ってのが発端です。
そう考えると、プラグインで追加できるのがベストですね。。。

記事自体へのリンクが切れているものもあるようです。
そんな時は、その記事のホームにアクセスして探してみてください。


プラグイン

Role Manager(ユーザー管理。会員制サイトなど)
http://web-taiyo.com/user

Custom Post Template(投稿記事にテンプレートを適用する)
http://web-taiyo.com/custom_post_template

Event Calendar 3、Calendar(イベントの管理とカレンダー)
http://web-taiyo.com/event

WP-CMS Post Control(投稿画面のカスタマイズ。投稿画面に不要と思えるパネルを非表示に出来る) <気になる
http://web-taiyo.com/post_panel

WP Post Columns(投稿のレイアウト。投稿を2カラム、3カラムなどにレイアウト)
http://web-taiyo.com/post-columns

Postie(メール投稿)
http://web-taiyo.com/mail_post


WordPressでサイト構築して便利だったプラグイン
http://blog.akuapa.com/?p=71


Simply Exclude(各カテゴリーやエントリーアーカイブ(記事ページ)で特定のカテゴリのものだけ表示させたい)
Custom Field Template(カスタムフィールド。バナーをページのいろんな場所に表示させたい、とか、たとえばフッタ部分に常に表示されるテキスト、など) 
Breadcrumb NavXT(パンくず)
Archives for a category(特定のカテゴリーの月別リストだったりを表示させたい時)
CutFirstChar for WordPress(カテゴリの順番を自由に変える)
Google Map Shortcode(グーグルマップ)

カスタムフィールドに関連して・・・
http://web-taiyo.com/custum-field
Custom Field GUI Utility(http://www.tinybeans.net/blog/download/wp-plugin/cfg-utility-100.html)
More Fields(http://wordpress.org/extend/plugins/more-fields/)


WordPressでホームページ!…とは?
http://mkt-system.jp/blog/

使ったプラグイン(あとで調べてみよう)
・Google (XML) Sitemaps Generator for WordPress
・WordPress Disable Revisions and Autosave plugins
・Another WordPress Meta Plugin
・Sitemap Generator
・contact-form-7
・FireStats
・WP Multibyte Patch

WP Multibyte Patch
日本語版のマルチバイト文字に関する修正を行うプラグインです。メール送信、トラックバック受信、ピンバック受信、検索等で発生する障害に対して対策(日本語版には最初から入っている?)
http://www.exe1993.jp/wpbusiness/archives/wp-multibyte-patch/

FireStats
アクセス解析かな?記事、中途半端なのが多くて探すの断念

contact-form-7
コンタクトフォームを作るのか。下に記事あり。

Sitemap Generator
サイトマップを作るんだろうなあ


WordPressにまずは入れておきたいプラグイン
http://challenge.customplan.info/2009/09/wordpressにまずは入れておきたいプラグイン/


Link Indication(リンクを別ウインドウで開く)
Header and Footer(ブログのHTMLに任意のコードを追加できる)

Navigation List Plugin NAVT (カテゴリーの自由な分割が可能に)
http://webhost.glyco-globe.com/tag/navigation-list-plugin-navt/

WP To Top(ページの上に戻るボタンを追加)
http://htmlblog.net/wp-to-top/

wp-tegaki(投稿エントリ内のタグで指定した文字列を指定の TrueType フォントで出力する)
http://wppluginsj.sourceforge.jp/wp-tegaki/

Contact Form 7 (日本語)(お問い合わせフォーム設置)
http://ideasilo.wordpress.com/2007/10/22/contact-form-7-in-japanese/

Improved Include Page で任意のページを読み込む
http://www.mono-lab.net/92.html

AddQuicktag で投稿作成を楽にする
http://www.mono-lab.net/65.html

TinyMCE Advanced(ビジュアルエディタを 高機能にする) 
http://www.mono-lab.net/57.html

pageMashページの表示順を変更する方法 <カテゴリメニュー順変更のページメニュー順変更版
http://www.mono-lab.net/45.html

WordPressでHP作成(PageMashNavigation List Plugin NAVTDD Sitemap GeneratorBreadcrumb Nav XT
http://webhost.glyco-globe.com/tag/pagemash/


関連記事を表示

Yet Another Related Posts Plugin で関連記事を表示する
http://www.mono-lab.net/91.html

Simple Tag を使って関連記事を表示する
http://www.mono-lab.net/90.html

関連記事を表示するプラグインを3つ紹介(Simple TagsSimilar PostsYet Another Related Posts Plugin
http://www.mono-lab.net/82.html

Similar Posts の紹介と設定例 – 関連記事[投稿|エントリ]を表示するプラグイン
http://www.yukun.info/blog/2008/10/wordpress-plugin-similar-posts.html


PHPカスタマイズ

トップページなどに表示する新着情報を、文字数制限をして表示する方法
http://www.devolen.com/blog/wp_custum/number_letters_restrictions_new_info/

トップページなどに、カテゴリー別の新着情報を表示する方法
http://www.devolen.com/blog/wp_custum/cat_distinction_new_info/

トップページなどに新着情報を表示する方法
http://www.devolen.com/blog/wp_custum/new_info/

WordPressカスタマイズ
http://www.mono-lab.net/wordpress-customize


ライバルになりそうな企業のサイトも見てみよう。
リンクは張らないので、コピペで見てね。市場調査は大事ですよ。 
ttp://www.wordpressjp.com/
ttp://www.bloho.net/service/wordpress
ttp://www.wordpresslab.org/service/


Favicon Manager~ファビコンを表示できるプラグイン
[Wordpress] Faviconが簡単に設置できる「Favicon Manager」
http://www.nwlab.com/?p=185

トップページの作り方 <この記事、良く読もう。多分重要な事書いてる。
http://web-taiyo.com/top_page1
http://web-taiyo.com/wordpress_theme

投稿ごとにデザインテンプレートを変更するプラグイン – Custom Post Template
http://wpgogo.com/plugin/custom-post-template.html


もっと大きなレベルでWPを変更するプラグイン

WP e-Commerce(ECサイト構築)
http://www.instinct.co.nz/e-commerce/(英語サイト)
http://www.usconsort.com/usces/(サポート使い方など日本語)
http://wordpress.org/extend/plugins/usc-e-shop/(DL)

NextGEN Gallery(フォトギャラリー構築)
http://alexrabe.de/wordpress-plugins/nextgen-gallery/


追記履歴:
2009.12.13、2009.12.15、2010/02/07


関連記事:
[WP] トップページを設ける際に役立つ情報
[WP] カテゴリごとに別のデザイン


WordPress レッスンブック 3.x対応 おすすめ商品
WordPress レッスンブック 3.x対応


[Ar] どこまでデザインできるのか実験



 

Artisteer 2は、レイアウトとか結構決まってるんですよね。
その中で、どこまでデザインが出来るのかトライしてみました。

シンプルなデザインで検証してみます。
ウィジェット部分の背景がテクスチャでごちゃごちゃしてるのは、テクスチャをひけるかの実験です。
残念ながら、記事部分にはテクスチャをひけませんでした。 
斜線とか走査線が入ってる部分はテクスチャを貼る事ができる部分です。


シンプルなデザイン
シンプルなデザイン


ZIPファイルです。自由に使ってください。
Simple2009120401_wp

現状での欠点は

  • レイアウトの自由度が無い
  • フォントがpx指定。リキッドデザインができない
  • 記事部分の背景とタイトルの背景にテクスチャを貼れない
  • ズープスとムーバブルタイプに対応していない
  • 良い写真が無い。良いアイコンが無い。

良いアプリケーションだと思うので、今後に期待したいです。


ちなみにこのテーマはこちら(↓)のアプリケーションで作っています。
トライアル版もあるので試してみると良いですよ。

Artisteer - Web Design Generator



[web] AJAXってなに? サンプル集へリンク



 

サンプルをみるのが早いと思いますので、
サンプルを公開しているサイトをピックアップ。
そのまま使えるのや、ダウンロードして中身を見れるのもあります。

AJAXで Cover Flow を作成する
http://blog.enviro-studio.net/?eid=258

[JS]iTunesのカバーフローのような画像ギャラリーのスクリプト
http://mediaeventservices.com/demo/gallery/gallery.html
http://coliss.com/articles/build-websites/operation/javascript/628.html

jQueryでAjaxを利用する基本チュートリアル
http://ascii.jp/elem/000/000/458/458236/

Ajaxでどんな事が出来るのかを知るサンプル集26種類 jQuery interface編
http://blog.4galaxy.net/16.html

JavaScript + Ajax 実践サンプル集 (1015本以上)
↑ほんとにそんなにあるの?見てないからわからない
それよりも、宣伝が多いので注意!!
http://jsajax.com/default.aspx

この辺が上位みたいなので、サンプルとしてはこの辺が妥当
http://jsajax.com/SamplesRate.aspx

1週間分のスケジュールを表示する
http://jsajax.com/jQueryWeekCalendarArticle1439.aspx

DHTML&AJAX アイデア見本帖
http://www.shoeisha.com/book/hp/dhtml/

JavaScriptistは、JavaScriptやajaxのサンプル/入門/リファレンス/ライブラリ情報の公開サイトです。
http://javascriptist.net/

AJAXのサンプルが山ほどダウンロードできるサイト「Ajax Rain」
http://gigazine.net/index.php?/news/comments/20070921_ajaxrain/
http://www.ajaxrain.com/index.php

Ajaxな日々
http://www.railwalker.com/ajax/

Ajax : 勉強用サンプル&解説
http://www.openspc2.org/JavaScript/Ajax/

SolidStateEveryday – Ajax,javascript,UIサンプルとチュートリアル
http://solidstate.jp/

AJAXサンプル開発者ブログ
http://ajax-world.sakura.ne.jp/blog/

JavaScript+Ajaxでサクサク動くサイトを作ろう!
http://archive.mag2.com/0000270581/index.html

チェック必須!GUIインタフェースを作るようにWebインタフェースを作成できる「Sigma Visual Ajax GUI Builder」
http://www.moongift.jp/2009/01/sigma_visual_ajax_gui_builder/

その他もろもろ
http://feed.designlinkdatabase.net/like_Ajax%E3%80%80CSS/127202_0_1.aspx

http://f32.aaa.livedoor.jp/~azusa/?t=ajax&p=jquery_plugin_navigationmenu

http://d.hatena.ne.jp/shimooka/20090325/1237953245

http://feed.designlinkdatabase.net/like_jQuery%E3%80%80スライドショー/353911_1_1.aspx

こんなところでしょうか。よいサイトあれば、教えてください〜



[web] ポータルサイトを探す。洗練されたデザイン。



 

同じような事を提供していても、ベタ面の比率や濃淡、ベースフォントの大きさ、ラインの使い方、空白の広さ、ボタンやタイトルの余白、アイコンのサイズなどで、印象がかなり変わる。
サムネイルは、ちゃんと表示できていないものもあるので、参考程度に見てください。


@nifty
http://www.nifty.com/
WEBポータル、シンプル、情報、オレンジ、ブルー、グレー、ホワイト、Ajax







AOL
http://www.aol.jp/
WEBポータル、ビビット、情報、ブルー、レッド、イエロー、Ajax







au one
http://auone.jp/
WEBポータル、ポップ、情報、オレンジ■、グリーン、ブルー■、Ajax







OCN
http://www.ocn.ne.jp/
WEBポータル、シンプル、情報、レッド、パステル、ブルー、Ajax







So-net
http://www.so-net.ne.jp/
WEBポータル、シンプル、情報、イエロー、パステル、オレンジ、グレー、ブルー、Ajax







livedoor
http://www.livedoor.com/
WEBポータル、シンプル、情報、レッド、グレー、ブルー、Ajax







goo
http://www.goo.ne.jp/
WEBポータル、ポップ、情報、スカイ、イエロー、ブルー、Ajax、大きいアイコン







MSN Japan
http://jp.msn.com/
WEBポータル、ビジネス、情報、ブルー、オレンジ、スカイ、Ajax、ベタ色、大きいアイコン







Infoseek
http://www.infoseek.co.jp/
WEBポータル、ビジネス、情報、ブルー、レッド、グレー、Ajax(記事数増減)、ベタ色、大きいアイコン







Excite
http://www.excite.co.jp/
WEBポータル、ビジネス、情報、グレー、ブルー、レッド、Ajax、文字小さめ







BIGLOBE
http://www.biglobe.ne.jp/
WEBポータル、情報、ブルー、スカイ、レッド、Ajax







careerzine
http://careerzine.jp/
職活ポータル、情報、ブルー、オレンジ、スカイ、Ajax







News2u.net
http://www.news2u.net/
企業のニュースリリースを掲載するニュースリリース専門のポータルサイト







ZDNet Japan
http://japan.zdnet.com/
ITニュース系ポータル







nikkei BPnet 〈日経BPネット〉
http://www.nikkeibp.co.jp/index.html
日経BP社の総合情報ポータル







派遣EX
http://haken-ex.jp/
派遣の仕事情報は派遣EX-大手派遣サイト・派遣会社へ一括登録
派遣ポータル、ピンク、スカイ、女性向け?







転職のネオキャリア
http://www.neo-career.com/index.html
転職支援・転職情報が豊富な転職サイト
転職ポータル、ブラウン、オレンジ、男性向け?







idsite
http://idsite.co.jp/
インテリア雑貨、家電、ライト:デザインプロダクト







ブログパーク
http://blogpark.jp/
お気に入りブロガーが見つかるブログポータル







ITpro
http://itpro.nikkeibp.co.jp/index.html
IT(情報技術)に様々な立場でかかわる方々に向けた専門情報サイト







福助ウェブショップ『f-ing』
http://fukuske-webshop.com/
オンラインショップ、カワイイ、オシャレ、ピンク、オレンジ、ムラサキ






Webデザインのリンク集 Webデザインポータルサイト S5-Style
http://bm.s5-style.com/
デザイン重視系サイトへのリンク集

Design Iketeru
http://design-iketeru.azu-mi.com/
Webデザインのリンク集



[WP] iPhone用に最適化



 

ここで紹介されていた「WPtouch」
http://mantiddesign.com/archives/4367

「WPtouch」カスタマイズ方法など。ここの動かないな。。。
http://takamorry.com/article/20090714_wptouch.html

ここにも色々。それ以外も色々。
http://www.designwalker.com/2009/01/wp-plugins.html

このへんも、、、あ。バージョンが古すぎるせいか、ここのも動かない。
http://coliss.com/articles/blog/wordpress/plugin/1245.html

結局、動いたのはWPtouchだけだった。設定が悪かった??



[WP] カテゴリごとに別のデザイン



 

追記:2009/12/03

カテゴリごとに別のデザイン
http://blog.dacelo.info/wordpress/entry-243.html

カテゴリー又は記事ごとにデザインを変える方法
http://bgs-works.com/blog/?p=56

[WP] カテゴリー毎に詳細画面用テンプレートを別ファイルにする
http://labrid.jp/wp/archives/921/

上記3種は、cssとかを変更するタイプ


プラグインも見つけた。
これ、使ってみよう。

投稿ごとにデザインテンプレートを変更するプラグイン – Custom Post Template
http://wpgogo.com/plugin/custom-post-template.html


おまけ:CMSとしてのWordPressでサイト構築をするときに便利な13のプラグイン
http://moto-mono.net/2009/04/16/using-wordpress-as-cms.html



WordPress 3.x スタートアップガイド おすすめ商品
WordPress 3.x スタートアップガイド