画像なんていらない!! fontelloとCSS3を使って3Dボタンを作ってみた
こんにちは。 連日の暑さにとろけそう。井畑です。 今回は、前からやってみたかった事に挑戦してみました。 今はやりのWebフォントとCSS3を使って、 3Dボタンを作る事です。 以前から、機会があったらやってみようと思っていたのですが、 なかなか機会にめぐりあえず、どうせなら備忘録ついでに ブログに書いちゃえと思った次第です。 それでははりきってどうぞ！ 目次 1.Webフォントを「fontello」からダウンロード 1-1.Webフォントを「fontello」からダウンロード 1-2.解凍して中身を確認する 2.CSS3でボタンを作成 2-1.HTMLの設定 2-2.CSSの設定(WEBフォント) 2-3.CSSの設定(ボタンの装飾) 2-4.CSSの設定(ボタンのホバー時装飾) 1.Webフォントを「fontello」からダウンロード Webフォントを使うにあたり、最近とてもステキなサイ
私が利用してるWebデザイナー向け勉強会・セミナー情報サイト
数年前からちょくちょくwebデザイナー向けの勉強会やセミナーに参加する様にしてるのですが、それらの情報を得るのに私が利用してるサイトを紹介してみます。 もちろんこれ以外にも幾つもサイトはあるのですが、ここに紹介したサイトを併用することで殆どの情報は取得することができてます。 （他にお勧めのサイトあったら教えてください） IT勉強会カレンダー IT勉強会カレンダー IT関係の勉強会のカレンダーです。 大小関わらずいろんな勉強会やセミナー、イベント情報が掲載されてます。 情報量で言えば一番多いのではないでしょうか。 ※カレンダー追加方法 Googleアカウントにログインした状態で、右下の[+Googleカレンダー]をクリックすると追加できます 追記：IT勉強会カレンダーは情報量が多いので下記の検索を使うと便利です。 IT 勉強会カレンダー検索 CSS Nite CSS Nite CSSという名
Webデザイナーな私の勉強方法まとめ – VIVID COLORS + BLOG -福岡から東京に出てきたデザイナーのブログ-
私の勉強方法まとめてみました。 といっても 「いい情報をとりこんで、実践して、その結果をアウトプット」 をひたすらしているだけなのですが、実際にどのようなサイトや本を見てインプットしているか、どんな風に実践して、何をアウトプットしているかなどまとめてみました。 インプット 情報が美しくまとまっているサイトのフィードをチェック 国内外のWeb系の情報を丁寧にまとめてくれているブログがたくさんあります。 そういうブログのフィードをチェックしています。 デザインTipsやトレンド紹介、便利なプラグイン、プログラムなど、毎日どんどん新しい情報が出てきます。 全部読んで理解してその場で実践する、というとは不可能に近いので、へー、こういうことも出来るんだー、とさらっと頭に入れて、特に気になったものだけはてなブックマークなどでタグをつけて保存したりしています。 そうしておくことで、いざ●●しないといけな
Twitter BootstrapでさくさくWeb開発 : アシアルブログ
新年度です！ 新入学、新入社を迎えるみなさん、おめでとうございます。 エンジニアのみなさんがWebアプリケーションを作るとき、一番悩むのはデザインではありませんか？ カッコよくって統一的なデザインがほしい！でもデザインセンスないし…実は私もそうでした。 ですが、2月にメジャーバージョンアップしたTwitter Bootstrapを使うと、簡単にカッコいいサイトが作れます！ Twitter Bootstrapとはなにか Twitter Bootstrap CSSのフレームワークです。 Web上に使ってみた！スゲー！等、たくさんのドキュメントが存在していますが、中には2月以前のバージョン(v1.4)について言及しているものもありますので、2系を使う方はバージョンの違いに気をつけて下さい（クラス名など結構ガラっと変わっています）。 今回ご説明しているのは、Twitter Bootstrap 2に
Create Websites Without Writing Code Using Adobe Muse
2014年8月17日 Webサイト制作, 便利ツール グラフィックデザイナーさんの中にはWebデザインに挑戦したいと思っている人もたくさんいると思います。それでもなかなか一歩踏み出せないのはマークアップやコーディングがなんだか難しそうだからではないでしょうか？先日、ロンドンで出会ったグラフィックデザイナーさん達と話して、「タグの文字列を見ただけで蕁麻疹が…」というように食わず嫌いのソースコード恐怖症な方が多いようで、どうにかしてその思いを払拭できないか？Webデザインの楽しさを伝えられないか？と思い、印刷デザイン感覚でWebサイトが作れる「Adobe Muse」を紹介しようと思います。 ↑私が10年以上利用している会計ソフト！ Adobe Museとは？ 「Adobe Muse」はデザイナーさん達御用達のAdobeが提供する、印刷物をデザインする感覚でWebサイト制作できるアプリです。HT
画面遷移図とWEB仕様書 - ホームページ制作
ホームページを成功へと導くための重要なプロセス、画面遷移図およびWEB仕様書を作成します。 弊社では、以下のポイントを中心に画面遷移図・WEB仕様書を作成し、お客様とお打ち合わせした上でホームページの作成に着手します。 まずは、ホームページを構成するWEBページの洗い出しから始めていきます。 画面遷移図の作成 ホームページのリンク構造 ホームページの階層構造（ディレクトリ） ホームページの基本レイアウト next... 動的ページの仕様 next... 画面遷移図の作成 ホームページの作成に当たって最も重要なことは、まず画面遷移図を作成して、サイトオーナーの意図した通りにWEBページが閲覧されるかどうか、よく検討することです。 ホームページ制作でよく陥りがちなのは、サイトオーナーの希望に添ってWEBページを作ったはいいが、ページビューが伸び悩み、問い合わせや注文に至ることが少ない、といった
Webサイトの品質を保つ制作仕様書の作成
制作仕様書とは、Webサイトの制作における細かな技術要件やガイドラインを記載した資料のことです。Webディレクターが、デザイナーやコーダーなどのプロジェクトメンバーと協力し、クライアントに必要な情報をヒアリングしながら実制作が始まる前に作成します。 一般的なWeb制作のプロジェクトでは、1人の制作者のみで仕事が完結することはほとんどありません。そのため、制作担当のスタッフごとで制作方法の細かな部分が異なってしまうことがあります。 また、Webディレクターが制作物を検品する際にも、判断基準となるガイドラインが必要です。制作仕様書として文書化することで、スタッフは迷いなく制作を進めることができ、成果物の品質を一定以上に保てます。 制作仕様書の基本的な構成 制作仕様書は、デザインガイドライン、コーディングガイドライン、画面遷移、その他利用する技術に応じた細かな仕様や設計書などで構成されます。 デ
webサイト設計 仕様書 | スポーツスタイルミヤギ管理日誌
現在公開中のssmiyagiは、思いついたままにグラフィックデザイン、コーディング、システムの開発をしていた。 しかし、それでは効率が悪い。今回は仕様書をちゃんと作って設計していきたいと思い、手本を色々探していると以下のサイトが出てきた。 http://www.mdn.co.jp/di/articles/279/?page=1 参考になりそうなので、自分なりに必要となる情報を抽出。 １．サイトコンセプトを設定 何を成果とするのかを決める。 ssmiyagiの系統は「スポーツを始めてもらう」だから申込み系 「スポーツのある日常へ」がコンセプトだから、スポーツを始める人が増える事が成果。 スポーツ参加者を募る団体に問い合わせや、実際に人が来ることが目標。 ２．設計 ■作るものリスト(メイン) ・用件定義 サイトに組み込まれるシステムを洗い出す資料。ex)ログイン機能、問い合わせフォーム、掲示板
第1回 Webサイト構築・運用の流れ - MdN Design Interactive
WEBディレクションの極意 文＝島元大輔 大阪のWeb制作会社でWebディレクターとして活躍後、（株）キノトロープに入社。数多くの企業Webサイト構築プロジェクトにかかわる。その後、（株）ライブドアに入社、現在は（株）セシールに在籍。著書として「だから、Webディレクターはやめられない」（ソシム刊）。 url.blog-project.cecile.co.jp/ 第1回 Webサイト構築・運用の流れ 企業のWebサイトを構築するとき、最初から最後までひとりでつくり上げるということはまずない。制作も運用もさまざまな人物が登場することになる。そこで、その多くの登場人物をまとめ上げ、作業をスムーズに進行させるWebディレクターの存在が欠かせないものとなる。このページではWebディレクションに焦点を当てて、Webサイト構築・運用の進め方、コツ、心得などをそれぞれの場面ごとに解説していく。 Webサ
『iOSヒューマンインターフェイスガイドライン』はUI解説書の枠を越えている ：国内・海外情報から見える『企業のWEB活用法』：ITmedia オルタナティブ・ブログ
中小企業がITを活用して売り上げにつなげるにはどうしたらいいか？WEBマーケティングとWEB戦略コンサル実績350社50業種以上の実績とノウハウで、海外の最先端情報を中心に、噛み砕いてご紹介。 作成者：中山陽平 iOS、実質的にはiPhoneのアプリケーションを作る際に参照してくださいと言う事で配布されている「iOSヒューマンインターフェイスガイドライン（以下iOS_HIG）」 弊社のシステムを真剣にスマートフォン対応にするために読み始めたのですが、この内容が、ただのインターフェイスのガイドラインだけではなく、さらに踏み込んだ内容になっていて驚きました。 Appleのサードパーティアプリに対する姿勢、サードパーティアプリケーションがiPhoneの大きな魅力であるという認識が、このガイドラインからはにじみ出ています。 App開発者以外もぜひ見ておくべき これはぜひ、WEBに関わる方は見て頂き
Webディレクター・Webマーケターにおすすめのニュースサイト13選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
先日、Web業界の著名人が運営しているWebSig会議に出席しました。話を聞いていて印象に残ったフレーズが 「Webディレクター/Webプランナーの存在意義は今後高まっていく。Webがデバイスを超えて普及していく中で、特にWebプランナーは商品開発の段階から必要になる可能性が出てくる。その中で重要なのは、世の中に起こる変化を事前に汲み取れるか。大きな変化は小さな変化の積み重ねで起きている。その小さな変化をアンテナを高くキャッチし続けなくてはいけない。」 という言葉。 Webディレクター/Webプランナーにとって条件交渉や期待値調整などのコミュニケーション能力、面白いアイディアや企画をポンポンと思いつく発想力は重要です。ただ、それらのスキルは圧倒的なWebの知識を得て、さらに業界の流れを自分の中で把握し消化している上で初めて役に立ちます。 そんな訳で、Webの知識を得るためにチェックするべき
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://japan.internet.com/wmnews/20120712/3.html
吹き出し素材専門サイト「フキダシデザイン」
MarkeZine Academy
http://www.delight-tec.jp/web/price.html
フリーランスのための全国Webサイト制作料金表
W3Q - Web業界で働く方専用のQ&Aサービス - Tters
株式会社キャメルスタジオ（CAMELSTUDIO）
http://e0166nt.com/blog-entry-872.html
http://handywebdesign.net/2012/07/12colors-give-you-the-impression/
