もう迷わない！HTML5のもっとも基本的なテンプレートはこれだ！（2016年版）
HTMLを書くときのベースとなる「書き出し」。いまどきはエディターにプリセットされていますし、ネットにも山ほど転がっていますが、どうせならきちんと意味を理解して、自分だけのテンプレートを作っておくとカッコいい。 HTML5を習得していくうちに、HTML5のテクニックをまとめて使ったひな型を作っておきたいと考えることでしょう。もちろんお勧めしますし、開始点として便利な、オンラインソースの使用も検討してみるもいいでしょう（もっと詳しく知りたい場合は、html5boilerplate.comやhttps://github.com/murtaugh/HTML5-Resetも参照してください）。 ただし今回は、構築内容も含め、コードを一から説明していきます。なぜならHTML5とCSS3を使ったサイトやWebアプリを作る際、使えるオプションに詳しくなれるし、この記事をテクニックの手引きとして参照しやす
無料で目を引くグラフィック投稿やウェブページが作れる「Spark」がアドビから登場! | Techable(テッカブル)
デザインやDTP関連のソフトウェアの大御所Adobeからこのほどビジュアルコンテンツを簡単に制作できる無償ツール「Spark」がリリースされた。 このiOSアプリはウェブと連携するので、グラフィックを作成してSNSに投稿したり、ウェブページを作成したりの作業が場所を問わずシームレスに行える。 ・アプリは3種類 Sparkアプリは3種類ある。まず、ソーシャルメディアへの投稿を作成する「Post」。使いたい写真を選んで文言を入力し、デザインフィルターをかけるなど、ものの数秒でグラフィックスを作成してFacebookなどのSNSに投稿できる。 普通に写真にコメントをつけて投稿するよりオリジナル度が高まり、フォロワーの目を引きそうだ。 ・雑誌スタイルのウェブページも 次に「Page」。こちらでは、ウェブページを雑誌スタイルで作ることができる。 旅行ブログなど写真を多く載せたい時に便利で、雑誌のよう
【HTML5】section要素とdiv要素の違い / 使い分けについて - DD_log / HTML,CSS,Javascript,Wordpressの解説や雑感サイト
w3gによるdiv要素の解説は以下の通りです。 div要素（division）は区切りを意味するブロックレベル要素です。この要素自身が特に意味を持っているわけではなく、他の要素をグループ化（含まれた内容を一つの単位とする）し、文書に構造を付加することで文書の情報的価値を高めます。 上記のようにdiv要素自身には特に論理的な意味を与える役割りはありません。 ただデザインやレイアウトのために範囲を作成したい際に使用する要素となります。 使用例としてページ全体を中央に配置する場合などに、body要素内のすべての要素をdivで囲むなどして使われます。 section要素もdiv要素と同様に「範囲を指定」したり「区切り」を作成したりする要素です。 しかしdiv要素が論理的な意味を持たないのに対して、section要素は論理的な意味を持つ要素となります。 sectionは「一つのテーマを範囲指定する」
2016年これからのWeb制作業界の流れ、注目されているテクニックやツール、Webデザインのトレンドなどのまとめ
数多くのブログで2016年のトレンドをさまざまな切り口でポストしているので、その中から特に印象的で共感がもてたものをまとめて紹介します。 注目キーワードは、UI/UXはユーザーありきを忘れずに、洗練されたUIパターンとコンポーネント、旧バージョンIEのサポート終了、静的ページのジェネレーター、ページの肥大化。 淡いピンクとブルーは、今年のトレンドカラーのローズ クォーツとセレニティ 参考: 2016年のトレンドカラーはやさしい色、春の10色も素敵なカラーが揃ってる！ 2016年、Webとグラフィックデザインのトレンドと今後の展望 2016年、Web制作業界全体の流れ 2016年、注目されている新しいテクニック・コンセプト 2015年に定義されたレスポンシブWebデザインの8つのトレンド 現在のトレンドから見た良いこと、良くないこと、そしてダメなこと 2016年に学ぶべきプログラミング言語と
PSDをiPhoneでリアルタイムに確認できるPhotoshop CC 2015のデバイスプレビュー機能が超便利！ – ICS LAB
PSDをiPhoneでリアルタイムに確認! Photoshopのデバイスプレビュー機能が便利 Adobe Photoshop CCでモバイルアプリやWebサイト等のスマートフォン端末向けのデザインをした時、実機でどう見えるかを確認するのは重要です。しかし、画像の書き出しや実機への転送等、確認するまでには手間がかかります。2015年にアップデートされたPhotoshop CC 2015ではこの手間がなくなって、簡単に実機確認ができるようになりました。 ※2017年10月追記 「デバイスプレビュー」機能は2017年10月18日にリリースされたPhotoshop CC 2018で廃止されました（参照）。この記事で紹介している内容はPhotoshop CC 2017までの機能となります。 実機確認までの画像書き出しと転送が不要に 従来、Photoshop CCで作成した画像をiPhoneの実機で確
デザインの確かな知識が身につく！Webサイトやアプリのデザインの勉強になるスライドのまとめ
実践的なUXデザインやインタラクションデザイン、レスポンシブサイトに効くデザインTips、Sketchを使ったデザインフロー、Webデザイナーのためのタイポグラフィ講座など、Webサイト・アプリなどのUIデザイン/UXデザイン勉強になるスライドを紹介します。 時間をかけてゆっくり、何度でも見たいスライドばかりです。 写真: ぱくたそ 確実に良くするUI/UX設計 from Takayuki Fukatsu 実践的なUXデザインとインタラクションデザインの考え方 from CyberAgent, Inc. UXとデザインまとめ by 上野学 - presentation from UX まとめ 2015 from Sociomedia アクセシビリティからはじめる、WebサイトのUXデザイン from Yoshinori OHTA いいデザインのために組織の一人ひとりができること f
個人事業主ホームページの目的・制作方法を解説します | サイノ・マーケティング
ざっくり言うと HPを持たないのは論外 HP自作ツールは安かろう悪かろう 業者に外注で丸投げして、1人も集客できずに終わるケースが多い 半分外注・半分DIYが費用と集客面で一番コスパが良い 個人事業主・フリーランスの方で「ホームページを持っていない・これから作る予定」という方に向けてホームページを有効活用するための方法を解説します。 目次 非表示 顧客は営業マンやショップ店員に売り込まれる前に、ネットで情報収集・比較検討し、すでに決めている 個人事業主にホームページは必要か？ 不要か？ HPの作り方１．個人事業主のホームページ作成方法は”半分外注・半分DIY”がオススメ HPの作り方２．ホームページを持たない HPの作り方３．ホームページを自作（自分で制作） HPの作り方４．ホームページ制作を外注する 半分外注・半分DIY サイノ山本の実験 個人事業主がホームページを持つ目的 ホームページ
ちょっとした手間で、デザインをちょっとよく見せる小ネタのまとめ
よいデザインとは、ちょっとしたことを積み重ねていくことが大切。 Webデザイン、カラー、PhotoshopやIllustratorなどのテクニックを磨く、デザインをちょっとよく見せる小ネタをDribbbleから紹介します。 画像: Girly Drop 複数のカラーから調和のとれたカラーパレットを作成 角丸パネルを重ねる時、それぞれの角丸をバランスよくする 円をよりくっきり見せる 滑らかなベジェ曲線を描く エレメントをくっきり美しく 斜めの線を使った小さいアイコンを作るこつ レイヤーパネルの設定をカスタマイズ 「ベベルとエンボス」より「シャドウ（内側）」がいい場合 曲線と直線を美しく手描きするこつ 複数のカラーから調和のとれたカラーパレットを作成 広範囲のコントラストをもつ複数のカラーから調和のとれたカラーパレットを作成します。
これからのWeb制作に役立つ、69個の有益で大切なポイントのまとめ -69 Website Design Tips
Web制作のデザイン、ユーザエクスペリエンス、コンテンツ、制作・開発、そしてこれから必要もの、避けておきたいものをまとめた「69 Website Design Tips」を紹介します。 ターゲットとなるビジターを調査するのが重要 カラーは2, 3色をベースに、多色が必要なら明度に変化をつける ロゴは、デザインされた高品質なものを使う コンテンツが魅力的でも読めないテキストでは意味が無い 要素が減った時増えた時のことも考えてデザインする 既製のデザインを使うのではなく、ターゲットに適したデザインをする 構造化されたデザインにはグリッドが便利、汎用性の高い12カラムがお勧め 重要な要素を目立たせる時は、必要のない要素を取り除いてシンプルにする トレンドの使いすぎはよくないですが、10年前のデザインを使用するのはもっとよくないです デザインはオリジナル性を大切にします、既製をそのまま使うと他のサ
ノンデザイナー必見！ 絶対に見ておきたいデザインスキルアップできる記事12選 - ICS MEDIA
弊社のスタッフはフロントエンドの開発にとどまらず、デザインを制作する機会も少なくありません。弊社に限らず、近年職種を問わずデザインを扱う機会が増えているように思います。しかし、コンテンツ要素が整理整列されていなかったりテキストのカーニングがされていなかったりと、基礎的なことができていないようなケースも多く見られます。基礎的な部分が押さえられていないと、野暮ったさや素人感が出てしまいイマイチな仕上がりになってしまいます。 今回はそういった方に是非読んでもらいたい記事を、すぐにでも実践できる内容を中心にピックアップしました。Webサイトやアプリケーションのデザインだけでなく、企画書やプレゼンテーション資料の作成などでも応用できるものなので、どなたでも覚えておいて損はないと思います。 フォント選び フォントの基本的な選び方 | Arch ▲フォントの系統から書体、ウェイトの選定方法まで、ユーザー
1ページで完結、Web制作者が助かるチートシート・資料・PDFまとめ
作成：2015/08/10 更新：2017/04/16 Web制作 > 開発環境 ページを移動せずにテンプレートや仕様書を確認したい。今回はPCの横に貼ったり印刷したり、ワンクリックで見れるように、1ページで完結している資料をまとめました。Web制作をする上で便利なチートシートや資料・仕様書まとめです。 エンジニア速報は Twitter の@commteで配信しています。 もくじ WordPress版 受託用マニュアル １．ヒアリングシート ２．WP版ホームページ制作の流れ ３．WordPress管理マニュアル ４．WP版品質チェックシート ５．Wordpress タグ タスクランナー ６．gulp ７．Bower JavaScript 代替言語／JST ８．TypeScript ９．CoffeeScript １０．Jade コーディング用 １１．Chrome 開発ツール １２．html5
【生存戦略】20代のWebデザイナーが身につけるべき15のスキル一覧 - paiza times
Photo by Matthew Pearce 今回のpaiza開発日誌は片山がお送りします。 皆さんはWebデザイナーがどんな仕事をする人か？という事を明確にイメージ出来るでしょうか？ 最近、弊社でWeb/UIデザイナーを採用する事になったのですが、求人の要件を固めていくにあたって、そもそもWebデザイナーって、どんな経験を持った人を指すんだっけ？というのが曖昧だったので、Webデザイナーのキャリアパスと、15分野のスキル一覧を書き出してみました。 現在20代のWebデザイナーだという方が、今後のキャリアを考える際にもちょうど参考になりそうな物になったので、せっかくなので公開してみようと思います。Webデザイナーからどのような職種にキャリアアップ出来るのかと言う事と、そのために必要な経験を15分野にまとめてみました。 企業がWebデザイナーを採用する際の求人要件定義にも使えるかと思います
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
商用無料でしかも高品質！レスポンシブ対応、HTML5/CSS3で作成されたテンプレートのまとめ
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
http://harold-spm.com/webdesign-dokugaku/
http://www.smaroomch.net/web-design-dokugaku-site/
Flipsblog.jp
海外向けサイトに適したデザインとは？ 外国人が好むフォントや色彩感覚 | 一人でできるWebサイト収益UP術－ウェブ解析士事例集
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
