タグ

2012年5月4日のブックマーク (16件)

  • Photoshop VIP ☞ iPhone表示にも対応、レスポンシブWebデザインの無料WordPressテーマ15選(プラグイン付)

    『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年3月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材/配色やWeb制作といった最新トレンドも公開中。

    Photoshop VIP ☞ iPhone表示にも対応、レスポンシブWebデザインの無料WordPressテーマ15選(プラグイン付)
    hiralinko
    hiralinko 2012/05/04
    スマホ対応レスポンシブWebデザインの無料WordPressテーマ15選(プラグイン付)
  • CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました

    Webデザインをしていると、HTMLCSS だけではできない表現ってありますよね。そんな時によく使うのが jQuery。今回は jQuery っていまいちよく分からない ... っていう人が、jQuery に少しでも親しんでもらえたらいいなーと思って、知ってる事をまとめてみました。なので jQuery 初心者さん向けの記事です。 とっても当たり前なんですけど、Web サイトは基的に HTML で書かれていて、デザインは CSS で装飾されていますよね。最近では CSS3 の登場で、簡単なアニメーションも CSS で作れるようになりました。でもクライアントワークでは、まだまだ CSS3 を使える部分が限られているし、Webデザインに少し動きなどをつけたい時などは、まだまだ jQuery を活用する事も多いです。 私は Javascript が苦手で、jQuery もどちらかというと苦

  • WordPressでブログじゃないWebサイトを作るときのいろいろ(サンプル付き)

    とても長い記事になってしまいましたが、WordPress を使って、コーポレートサイトのサンプルを作ってみました。WordPress はブログだけじゃなくて、色んな Webサイトが作れますよね!今回は、私が WordPress でサイトを作る時にやっていることをまとめてみました。 今までこのブログの中で、いろいろな WordPress の Tips を書いてきました。でも WordPress を使った Webサイトの作り方そのものは、今まで書いた事がありませんでした。そこで今回は、 WordPress を使ってブログじゃない Webサイトをまるごとひとつ作って、私なりの作り方をまとめてみました。 今回のサンプルサイトでは、WordPress の固定ページ機能はもちろん、カスタム投稿タイプやカスタムタクソノミー(カスタム分類)を使って作っています。 ページを表示する為に使っているテンプレート

    hiralinko
    hiralinko 2012/05/04
  • Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き

    今回このブログ - Webデザインレシピを、iPhone などでも見れるようにリデザインしました。使用したのは CSS3 の Media Queries(メディアクエリ)。メディアクエリの使い方や感想、気をつけたい注意書きをまとめてみました! 遅ればせながらこのブログ – Webデザインレシピを、スマートフォンでも見れるように改修しました。このブログは WordPress で書いているので、スマートフォンや iPad への対応方法はいくつもあるのですが、今回は CSS3 の Media Queries(メディアクエリ)を使って、iPadiPhone など、いろんなデバイスに対応(対応というか、一応見れる程度)にしてみました。 なので Media Queries を使ったスマートフォン対応と、リデザインしながら思ったことなどをまとめてみました。 CSS3 Media Queries 目次

    hiralinko
    hiralinko 2012/05/04
    スマホ最適化
  • 私が利用してるWebデザイナー向け勉強会・セミナー情報サイト

    数年前からちょくちょくwebデザイナー向けの勉強会やセミナーに参加する様にしてるのですが、それらの情報を得るのに私が利用してるサイトを紹介してみます。 もちろんこれ以外にも幾つもサイトはあるのですが、ここに紹介したサイトを併用することで殆どの情報は取得することができてます。 (他にお勧めのサイトあったら教えてください) IT勉強会カレンダー IT勉強会カレンダー IT関係の勉強会のカレンダーです。 大小関わらずいろんな勉強会やセミナー、イベント情報が掲載されてます。 情報量で言えば一番多いのではないでしょうか。 ※カレンダー追加方法 Googleアカウントにログインした状態で、右下の[+Googleカレンダー]をクリックすると追加できます 追記:IT勉強会カレンダーは情報量が多いので下記の検索を使うと便利です。 IT 勉強会カレンダー検索 CSS Nite CSS Nite CSSという名

    私が利用してるWebデザイナー向け勉強会・セミナー情報サイト
  • I ♥ wireframes

    Tumblelog managed by Ivana Jurcic, Web Developer from Belgrade, Serbia. If you want to contribute contact me via email, twitter or post your wireframe in this flickr group. Facebook page Submit wireframes Archive RSS feed Adobe Proto Adobe® Proto, a new Adobe Touch App, lets you create interactive wireframes and prototypes of websites and mobile apps on your tablet. Communicate and share ideas wit

    I ♥ wireframes
  • Webサイトの骨組み: ワイヤーフレームを素早く・手軽に・美しく制作する

    2013年3月23日 Webサイト制作, 便利ツール Webサイトのデザインを始める前に、レイアウトやページ内で使われる機能を「設計図」として作っておきます。ワイヤーフレームと呼ばれるWebサイトの骨組みをしっかり作っておくと、デザインする段階でスムーズに仕事がすすみます。またクライアントとの打ち合わせでも大活躍。ここではワイヤーフレームを作る為の便利なオンラインツールと「ワイヤーフレームは手描き派!」という人のためのPDFテンプレートを紹介します。 ↑私が10年以上利用している会計ソフト! オンラインで使えるワイヤーフレーム作成ツール iPlotz iPlotzのWebサイト とにかく多機能でおすすめ。ワイヤーフレームを作る他にプロジェクトマネージメントもできます。オンラインでシェアしたり、JPG, PNG, PDFでの書き出し可能。 トライアルをするにはまずトップページから「Get S

    Webサイトの骨組み: ワイヤーフレームを素早く・手軽に・美しく制作する
    hiralinko
    hiralinko 2012/05/04
    オンラインのワイヤーフレーム作成ツール
  • ワイヤーフレームをつくる時に押さえておきたいポイント

    どのページをつくるか? まずトップページ。 体裁が変わるようであれば下層ページも作ります。 また、システムが入るプロジェクトでは画面遷移図としてつくることもあります。 結局のところプロジェクトによります。 競合他者調査 競合他者がどのようなサイト設計を行ってるか参考にします。 他サイトの設計は試行錯誤の結果辿り着いた設計とも言えます。 全く同じ設計にしてしまうのは問題がありますが、 「何故そのような設計にしたか?」を考える事でワイヤーフレームをつくる時の参考になります。 例えば賃貸のサイトではトップの目立つ場所に検索メニューがあります。 賃貸サイトでユーザーが一番求めてるのは賃貸検索ではないか、と考察できます。 (これは誰でも分かる例ですが…) また、ユーザーは過去の体験から次のアクションを予想します。 過去に賃貸サイトを利用した方なら、賃貸サイトで地図を見れば「地域から賃貸を探す」を連想

    ワイヤーフレームをつくる時に押さえておきたいポイント
    hiralinko
    hiralinko 2012/05/04
  • Web制作者は知っておきたいwebサイトのレイアウト7選 │ Design Spice

    レスポンシブwebデザインからグリッドデザインまでよく使われているwebデザインのレイアウト用語をまとめました。 レスポンシブwebデザイン エラスティックレイアウト リキッドレイアウト フレキシブルレイアウト 固定幅レイアウト グリッドレイアウト 可変グリッドレイアウト レスポンシブwebデザイン(Responsive Web Design) PCやスマートフォン、タブレット事に複数のデザインを制作するのではなく、 ディスプレイの幅に合わせてデザインを最適化する方法。 CSS3のMedia Queriesを利用してディスプレイサイズに応じてデザインを変更します。 メリット 一つのソースで複数デバイスに対応できるのでメンテナンスが容易です。 また今後デバイスの種類が増えてもそれに対応できます。 それぞれのデバイスに合わせた形で調整できるのでユーザーエクスペリエンスも高くなります。 デメリッ

    Web制作者は知っておきたいwebサイトのレイアウト7選 │ Design Spice
    hiralinko
    hiralinko 2012/05/04
    レスポンシブwebデザイン、エラスティックレイアウト、リキッドレイアウト、フレキシブルレイアウト、固定幅レイアウト、グリッドレイアウト、可変グリッドレイアウト
  • HTMLをWPテーマ化する時の手順リスト - かちびと.net

    一般的なHTMLファイルをWordPressの テーマにする時の手順と、使用するタグ をリスト化、というか自分用チートシート。 いつも子ページが時間掛かるので、単純 な構成のHTMLなら、テーマ化くらいは サクサク終わらせたいですね。 唯一の方法では無く、ベーシックな方法です。僕も一度作成してから必要に応じて別のタグを使います。 WPテーマ化手順リスト STEP.1 HTMLをindex.php、header.php、footer.php、sidebar.php等に分割。分割に関しては以前の記事をご参照下さい。 以下のインクルードタグをindex.php、search.phparchive.phpに追加。 <?php get_header(); ?> <?php get_footer(); ?> <?php get_sidebar(); ?> STEP.2 header.phpのmeta

    HTMLをWPテーマ化する時の手順リスト - かちびと.net
    hiralinko
    hiralinko 2012/05/04
  • 初心者が独自ドメイン「WordPress」の立ち上げでやったことまとめ&ハマったところ

    WordPressを独自ドメインで立ち上げる際にやったこと、参考にしたサイトなどをざっくりまとめておきます。 環境や使用したツール、一連の流れなどを参考にしていただければと思います。 PC環境などの違いによりこの方法でつまづくこともあるかもしれませんので、その辺りは注意してください。 環境 Mac OS X version 10.6.7 MAMP ツール さくらインターネット(レンタルサーバ:スタンダード) お名前.com(ここで自分の好きなドメイン名を取得する) FileZilla(FTPソフト、ファイル転送に使う) Emacs(エディタ、エディタは自由です) さくらインターネット(レンタルサーバ:スタンダード)を選んだ理由 どこのサーバーを利用すればいいの? 真偽はどうあれ納得できたのでコレで良いかなと。 初心者の方は参考にして良いと思います。 説明や情報はたくさん溢れています

    hiralinko
    hiralinko 2012/05/04
  • Youtubeの動画を背景に

    Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp

    Youtubeの動画を背景に
  • CSSでレイアウトするなら絶対覚えておきたい配置のルール:フロートや絶対配置、z-index とかいろいろ

    最近改めて CSS の基、要素の配置、レイアウトについて学習しました。過去に CSS でのレイアウトなどの記事を書いた事があるんですけど、改めて勉強してみたら、いろいろ間違えて解釈していたなー ... っていうか、基が分かってなかったんだなーと反省 ...。今回は CSS の基中の基、視覚整形モデルについてまとめてみました。 Webデザインをする上で、必須とも言えるのが CSS …。このブログ – Webデザインレシピでも、過去に CSS について書いた記事がいくつかあります。最近 … でもないけど、以下のふたつは CSS でのレイアウトについて、いろいろと書いた記事でした。 CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ – 2011年 6月17日 CSS:初心者の頃にハマったスタイルシートのあれこれ … IE7多め -2011年 4月21日 で

    hiralinko
    hiralinko 2012/05/04
  • MAMPでWORDPRESSのローカルテスト環境を作る – nilorior

    ローカル環境でwordpressのテストサイトを作るための手順。いつも忘れるので書いておきます。 必要なもの Mac (私の環境は MacBook 2.26GHz Inter Core 2 Duo, OS X 10.6.3 (Snow Leopard です。)) MAMP WordPress 1. MAMPのインストール MAMPをダウンロードして、解凍後アプリケーションフォルダに入れる。 2. WordPressのインストール Wordpress をダウンロードして解凍して、MAMPフォルダ>htdocs内にいれる。 *複数入れる場合は htdocs 内にtest1などというフォルダを作り、ソコにwordpressをコピーする。 例;htdocs>wptest>サイトa ←私の場合はこんな感じ。wptest以下にはサイトb, サイトc とかつけてます。現在はバージョン2.x系と3.x系が

    hiralinko
    hiralinko 2012/05/04
  • 写真が語るUXとUIの違い - Nothing ventured, nothing gained.

    Windows XPのXPがeXPerienceだったことを覚えている人がどのくらいいるかわからないが、正直、最初にユーザーエクスペリエンスと聞いたときに、どのように日に定着させようかと悩んだ。略語を開くことなどあまり無いので、製品名などは大して心配はしなかったのだが、確か何かの設定画面かにも、Experienceというタブ名か何かがあり、どのように訳すか頭を痛めたように記憶する。 それから数年、すっかりUX、すなわちユーザーエクスペリエンスという言葉が定着したように思う。それでも、今でもUXUIを混同する場面に出くわすことがある。 すでに様々なところで説明はされているが、敢えて、ここでもUXUIの違いを説明しよう。 UX(ユーザーエクスペリエンス)は、製品やサービスに対して、ユーザーがどのように感じ、そして反応するかのことである。実は、UXは2010年にISO 9241-210とい

    hiralinko
    hiralinko 2012/05/04
    UX(ユーザーエクスペリエンス)UI(ユーザーインターフェイス) UXのハニカム構造という図でも知られているように、役に立つか(Useful)、使いやすいか(Usable)、望ましいか(Desirable)、価値があるか(Valuable)、見つけ
  • WordPress(ワードプレス)のトラブル・カスタム・ウェブマーケティングの相談など|WordPressのお医者さん

    hiralinko
    hiralinko 2012/05/04
    メディア管理、一発フルバックアップ機能。3サイトまで無料。