スマートフォン専用ページを作成する際に知っておきたいポイント｜Webpark
最近今あるサイトをスマートフォンに対応させるべく、コツコツがんばっているわけですが、その際に気になったことや知っておきたいポイントをまとめてみました。基本的な内容も多いと思いますが、ご参考になればと思います。 1. スマートフォンに対応させるには？ ウェブサイトをスマートフォンに対応させるには2つのパターンがあると思います。 PCにもスマートフォンにも対応したページを作成するか、PC用ページとは別にスマートフォン専用ページを作成するかです。 1つ目のPCにもスマートフォンにも対応したページは、Media Queriesを使う場合が多いと思います。 Media Queriesを使うと画面のサイズの違いによって適用するCSSを変更することができます。 例えば、CSS-Tricksというサイトは画面サイズによってレイアウトが大きく変わってます。 Media Queriesについては後で簡単に紹介
0 から始めるHTMLとCSSの基本・基礎-webデザイン入門-
私の周りでwebデザインが出来る人ってあんまりいません。でも「webデザインってどうやるのー？」とか「私もやってみたいんだけど…」とかの声はよく聞きます。皆興味はあるのに”webデザインは難しい”と思って始められないんじゃないでしょうか。そんなこれからwebデザインを始めたいビギナーさんに向けてHTMLの基本・基礎をまとめてみます。真新しいことは特にないほんとに基礎です〜＞＜ by：fweez まずはじめに とりあえず用意するもの2つ HTMLの基本 HTMLとは？ 1.DOCTYPEの宣言 2.基本的なタグ 3.<body>の文書構造 CSSの基本 CSSとは？ 1.CSSの読み込み方法 2.指定パターン 3.marginとpaddingの違い 4.ブロック要素とインライン要素 応用してwebページを作ってみる まずはじめに 一口にwebデザインといっても色々なことがあると思うのですが大
携帯サイト作成時の注意点（制限事項含む）｜携帯サイトの作り方｜モバイル／スマートフォン｜PHP & JavaScript Room
注意事項 docomo *1：モノクロ2階調で5KB以内のGIFファイル推奨（高階調だと低階調の機種でうまく表示されない可能性あり）。GIF87a/GIF89a形式のみサポート。最大画像サイズは最大94x72ドット。 Animated GIFは最大画面数5コマまで。1画面に最大4個まで配置可。リピート回数は最大166回。各コマは同一サイズで開始座標も同一にすること。 iモード全機種対応なら、画像サイズは最大128x128以内に収める。 au *2：au全機種対応は「GIF89a」。ファイルサイズは25KB以下。ブラウザで表示する場合はリサイズする等して9KB以下にする。 参照：KDDI au:技術情報 » GIF画像
クライアントに「とりあえず作ってみて。みてみないとわからないから」と言われた時のディレクターの返し方
先日、「とりあえず作ってみて。みてみないとわからないから」というつぶやきがTwitter上で話題になり、その一連の流れをまとめたtogetter上の記事が物議を醸した。 という事がありました。 「とりあえず作ってみて。みてみないとわからないから」つぶやきまとめ」 んで、この記事に対して僕がディレクターとして思ったことがあったり無かったりしましたので、ちょいと書いてみようかと思います。 ナカムラが思ったこと。 これってディレクターが前段階でもの申してやればなんとでもなることじゃね？ まず、クライアントの意見は全部入れるとだいたい見当違いのものができあがることが多いです。もうね、これは仕方ないと思う。だって企業の担当者はWEBの専門家では無い場合がほとんどなんだもの。 だから、どんなものができるのかイメージできない。 結果として「とりあえず作って見せてよ。お金出してるでしょ？」というスタンスに
ソーシャルボタン設置のソースコードサンプルあれこれ。 | バシャログ。
今日は2011/11/11、やたら「1」の並ぶ日付です。 11時11分にスクリーンショット撮り損ねてちょっとorzなhakoishiです。 いっそその時間に更新までしてしまいたかった！後の祭り。 さて、今回はソーシャルボタン設置のソースサンプルをいくつかご紹介。 今回取り上げるサービスは、「はてなブックマーク」「twitter」「facebook」「addthis」の4つです。 (2011/11/22)その2、アップしました。「google+」「mixiチェック」「mixiイイネ！」「evernote」編です。 引き続き、ソーシャルボタン設置のソースコードサンプルあれこれ。 はてなブックマーク <a href="【URL】" class="hatena-bookmark-button" data-hatena-bookmark-title="【サイト名】" data-hatena-book
Web業界でよく使う用語の英語辞典
2014年8月22日 Web関連記事, 英語 英語のサイトにはたくさんの素敵情報が溢れていますが、なんだかハードルが高く感じていませんか？頑張って読んでみたけどわからない単語につまづいたり。という事でWeb業界でよく使う英単語を、過去のメールのやり取りを読み返したりして思いつく限り書いてしました（そのままカタカナになっている単語は省きます）。ポイントをおさえれば「「英語だから…」なんて拒否っちゃ駄目なWEB屋が知っておくべき厳選ブログ、WEBマガジン色々」で紹介されているようなサイトもスラスラ読めるようになるかも！？ ↑私が10年以上利用している会計ソフト！ 目次 あ行 か行 さ行 た行 は行 ま行 や行 ら行 あ行 値 – Value HTML、CSS、JavaScriptなどなど、いろんな場面で出てきますね。 You can get the value of a form elemen
3G端末（FOMA・WIN・3GC）のモバイルサイトのコーディング＆デザイン - livedoor ディレクター Blog(ブログ)
こんにちは。『Cure』や『livedoor 歌詞』を担当しているモバイルディレクターの吉沢です。 つい最近、PC サイトのディレクターが初めてモバイルサイトの開発を担当するという機会がありました。 どの情報を伝えれば初めてモバイルサイトを担当する人にもスムーズに進められるのか、PC とモバイルで一番特徴のあるコーディングとデザインについて、これだけ覚えておくと簡単な3G（FOMA・WIN・3GC）端末用モバイルサイトが作れてしまうノウハウをご紹介したいと思います。 【01】対応端末について こちらの記事にもあるとおり、3G 端末（FOMA・WIN・3GC）がアクセスの9割を占めているため、これからオープンさせるサイトの対応端末は、3G 端末で十分そうですね。 サイトの内容にもよりますが、下位端末（PDC・P型・C型など）を対応端末として含めてしまうと、機能や容量制限などに悩まされ、逆に運
変形 - Akiba Hideki
今回は、「設計変更」が発生したときの設計者とクライアント間のコミュニケーションを考慮しました。 あなたは、あなたのために仕事を注文するクライアントやディレクターとどのような意識を持っていますか？ たとえば、少し大規模なシステム開発の場合、「このように動くものを作る」と言った直後にプログラムを作成する開発者などはいないようです。 実際、システム開発の予算の大部分は非常に重要であるため、「設計（要件定義を含む）」に充てられています。 つまり、この「設計」フローがなければ、手を動かすことで作業することはできません（大まかに言えば）。 一般的なデザイナーの仕事には大きな懸念があります。 つまり、「要件を設計および定義するためのフローなしで設計を行う設計者が多すぎます」。 現在、特にWeb制作では、「デザイナーと開発者」は異なる次元の人種のように切り離されていますが、それは本当ですか？ 私はデザイナ
【無料配布】Web制作設計手順書 | 毒舌プランナーの異論持論
皆さん、長らくお待たせ致しました。 先日からお話に上がっていた 【Web制作設計手順書】 を配布致します。 下記よりダウンロードして下さい。 PowerPoint用とKeynote用とがありますが PowerPointに関してはアニメーションなど上手く動作しなかったりしますので その点についてはご了承下さい。 ※追記：単純に閲覧用、印刷してお使いになる方用にPDF版も用意しました。 ※追記2：PowerPoint版の5Pと14Pがおかしかったのを修正しました。 ※追記3：「色彩」の部分で黄色と白が見辛かったので全体的に修正しました。 基本的にはMacやiPadをお持ちの方はKeynoteでの閲覧を推奨いたします。 また注意事項としましては 無料配布ではありますが、著作権は放棄しておりません。 編集する、再配布、商用利用などご自由にして下さって構いませんが 「自分が作った」 等と豪語するのは
ディレクターが思う。Webサイト設計時に必ず注意したい2つこと（+1） | ユーモアのある人生を。【Maka-Veli.com】
まず前提として、「ヒアリング」がディレクターとしては最も重要な要素ですが、 これは別の機会とさせて下さい。 ヒアリングを行う上で、もしくは行った上での対策3つです。 いわゆるターゲッティングです。 必ず必要になる設計要素で、 これが無ければWebサイトの成功は無いと個人的には思っています。 なぜターゲッティングが必要か？ 見たい人が見ないサイトでは、存在価値がありませんよね。 これは、設計時や表面上のデザインに大きく影響します。 女性向け、男性向け、10代、50代、様々なターゲット層を 踏まえ、サイトを構築する事が重要です。 どのように行うか？ ターゲットを想定し、見せたい情報は何か、ユーザーが知りたい情報は何か？ そしてどんな人が訪れる可能性があるか？ それら全てを想定します。 よく行われるのは「ペルソナマーケティング」と言われる手法で、 ペルソナ=架空の人物
チームでWebサイトを制作する際に気をつけたい10のマナー
2013年9月26日 Webサイト制作, フリーランス Webサイトの制作会社で働いている人はもちろん、普段一人で活動しているフリーランサーの方も、フリーランサー同士が手を組んでWebサイト制作を行ったり、制作会社がフリーランサーに受注するなどで、複数の人でひとつのサイトを制作することもあると思います。そんな時に起こりやすいトラブルと、それを防ぐ方法を考えてみます。ちなみに今回はデザイナー目線での気づいた事です。プログラマーさん目線での気をつけたい事などあればお聞かせください :) ↑私が10年以上利用している会計ソフト！ デザイン時 1. レイヤーに名前をつける 「もらったPhotoshopファイルを開いたら、どれがどのレイヤーなのかさっぱりわからない！」なんて体験、ありませんでしたか？デザインファイルを共有する場合はレイヤーの管理がとても大切です。「レイヤー０」「レイヤー１」「レイヤー
ディレクターなら覚えておきたい客観的視点を身に付ける“５つ”の考え方 : LINE Corporation ディレクターブログ
こんにちは、櫛井です。 陰と陽、正義と悪、肉食と草食、いつの世も相反する要素というのはありますがいずれも表裏一体ともいえます。今回は、ディレクターとして身に付けておきたい「客観的な視点」について書いてみたいと思います。 客観的な視点はなぜ必要？ Webのディレクターをしていくと様々な役割を求められますが、一番大きな役割は「プロジェクトをゴールさせること」ではないでしょうか。企画だけうまくいっても、開発だけうまくいっても、結局は設定したゴールに辿り着かないことには意味がありません。プロジェクトメンバーには様々な考え方の人が集まりますが、その時にチームを引っ張る力とはなんでしょうか。私は客観的な視点から生まれる説得力であると考えます。 また、自分以外の誰かに「なぜこうなのか」を説明する時にも「え、いいと、思ったから…」では説明になりませんね。あらかじめ様々な視点 (とくに自分とは相反する視点)
Nothing found for 2011 09 Websiteprice
Not Found Sorry, but you are looking for something that isn't here.
レスポンシブwebデザインで制作する時のポイント
先日、CSS Nite in Ginza, Vol.59「DreamweaverによるレスポンシブWebデザインの実装」に出席してきました。 とても勉強になったので復習も兼ねてレスポンシブwebデザインに関して、セミナーで学んだ内容に自分の調べた点を加えてまとめます。 （一部の図はセミナーの資料を元に作成してます。） 始めに：スマートフォンサイト制作の選択肢 スマートフォンサイトを制作するには幾つかの方法があります。 アプリ 独自系 スクラッチ（0からスマートフォンサイト用に構築） jQuely mobileを使用 流用系 現在のデザインをほぼ流用、調整のみ レスポンシブ・デザイン どの方法にもメリットデメリットはあり、どれが最適かは サイトのコンセプトや規模、予算など複合的に考えて選択する必要があります。 今回のエントリーではレスポンシブ・デザインのみにふれます。 レスポンシブwebデザ
ウェブサイトの課題発見のために、筆者が普段から使っている「解析系ツールボックス」の中身を紹介！ - Real Analytics （リアルアナリティクス）
新しいサイトを分析する際に私がよく利用している無料ツールを紹介いたします！これら良く使う「道具」は私にとっての大切なツールボックスです。今回はその中から15個のツールをピックアップして紹介いたします。どのツールも無料で、私自身定期的に利用しているものばかりです。「定番物」も多いですが、使い方などの関連記事もあわせて紹介していますので、一緒にチェックしてみてください。 1:GoogleAnalytics+GAwithSBM+Excellent Analytics サイト：Google Analytics 言わずと知れた無料のアクセス解析ツールです。関連書籍やオンライン上での情報も豊富で、アクセス解析という分野を広めるのに大きく貢献したツールです。アクセス解析ツールが入っていない場合は、まずはこのツールを必ず導入しています。 そしてGoogleAnalyticsをパワーアップさせるために以下の
モバイルサイトの3キャリア共通CSSと最新コーディング事情 : LINE Corporation ディレクターブログ
こんにちは、「livedoor Blog」を担当している吉沢です。 スマホの登場で、すっかりケータイ (フィーチャーフォン/ケータイ/ガラケー) が日陰に追いやられた感がありますが、ケータイも毎年進化していて、モバイルサイトの開発が行いやすいケータイがユーザへ浸透してきています。 livedoor Blog では、スマートフォン分野に注力しながら、月間15億PV あるケータイ版のUI最適化にも引き続き取り組んでいます。今回は、livedoor Blog で採用した事例を元に、この先1〜2年のケータイ開発・運用に役立てられる、3キャリア共通の CSS から最新のコーディング事情を紹介したいと思います。 アクセスシェア〜ライブドアの場合 まずはどの世代のケータイをメインに開発して表示くずれを起こさないようにするか検討するため、アクセスシェアを把握します。 1年前と比べると、iモードブラウザ2.
まったくのゼロから、Webデザイナーになる方法 - ウェブデザイナーになるには
この記事は2011年に書いた記事です。2015年に書いた増補改訂版があります。 「Illustrator、デザイン - まったくのゼロから、独学でWebデザイナーになるためのロードマップ【Vol. 1】」（2015年3月） 前にも「独学でWebデザイナーになるのにまずやること」というエントリーをかいたが、簡易的な内容だった。 今回も大筋の考え方はかわらない。Webデザイナーになるには、たくさん作品を作って人にみてもらうことである。 今回はもっと踏み込んで、全くの未経験の人がどうすればWebデザイナーになれるのかの具体的なステップ（行動プラン）をまとめてみたい。すでに学校やスクールでWebを学んでいる人や会社でデザイン部門をあらたに設立したい人にも役に立つだろう。 ステップ１ 制作環境をつくる まず最初にやることは制作環境を揃えることである。以前だと、FAXとスキャナーは必須だったが、いまは
How To Enable HTML5 In Chrome | Robots.net
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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ネタ帳のyamada_ntさんが書いたWebデザインとかそこら辺のtips #帰れまTips100 - Togetter
ロリポップのレンタルサーバーで、htmlのままphpを使い、さらにinclude（インクルード）を使う方法 | ただのメモ帳