WEB制作に関するshinpieceのブックマーク (39)

  • 印刷用CSS(@media print)の設定とデバッグ方法って? HTMLの印刷崩れを解決 | 初代編集長ブログ―安田英久

    印刷用CSS(@media print)の設定とデバッグ方法って? HTMLの印刷崩れを解決 | 初代編集長ブログ―安田英久
  • HTML の 〜 内に書くタグの順番にも気を遣ってみた。

    今アナタがご覧になっている、このオンズのウェブサイトでは読み込み速度のスピードアップや各種マークアップのクオリティ維持のために随時徹底した改善作業を行っています。 これまでもブログにて様々なテクニックを紹介してきましたが、今日は<head>〜</head>タグ内のコードにフォーカスして、弊社が実際に行っているHTMLマークアップの考え方を紹介していきます。 ブラウザで「要素を検証」して実際にコードを見てもらうのが手っ取り早いのですが、参考までに以下にコードをコピーして記載します。 今日(2016年1月20日)現在のオンズのウェブサイトの<head>〜</head>タグは次のように記載されています。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="author" content="//on

    HTML の 〜 内に書くタグの順番にも気を遣ってみた。
  • 写真AC

    ここに JPGまたはPNGデータをドラッグ&ドロップ または ファイルを選択 5MBまでのJPG形式またはPNG形式のファイルのみアップロードできます。

    写真AC
    shinpiece
    shinpiece 2015/03/24
    素材 フリー
  • 【商用可】高解像度の無料写真素材が900枚!大きいサイズは「kaboompics」で決まり

    どうも、やなぎさわです。何かに特化した写真素材サイトってけっこう多いと思いますが、今回ご紹介する「kaboompics」は、個人・商用での利用が可能で、様々なカテゴリが用意してありきっとこれ使えるなという写真素材に出会えるはずです。 それに、なんといっても解像度がでかいのがポイントです。Web系の写真素材は、僕の知っている限りで大体2400pxくらいが多い感じがします。 でも、この「kaboompics」は、5000px以上ある画像が集約されているのです。 ポーランドのWebデザイナーさんが運営しているだけあって写真のクオリティも高いです。資料やイメージ写真、ブログのアイキャッチに使用できると思います! 必ず使える写真素材がある「kaboompics」 「kaboompics」 カテゴリ分けしているので、とても探しやすいです。 それでは、実際にどんな写真があるのかカテゴリ別に一部ご紹介いた

    【商用可】高解像度の無料写真素材が900枚!大きいサイズは「kaboompics」で決まり
    shinpiece
    shinpiece 2015/03/24
    写真 素材 フリー 高解像度
  • 企画書・提案書のデザインテンプレートサイト4選 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    提案書や企画書の作成は慣れが大事。慣れるまでは効率のいい作成の仕方がわからず、完成までに膨大な時間を要してしまう人もいるのではないでしょうか。 今回は「ほかの人の企画書を盗み見できるサイトやページ」をご紹介します。見せ方や考え方、そしてそれを先方に伝えるためのノウハウが詰まりまくっているので、見て損はないと思います。 それでは、見てみましょう! 未経験から6ヶ月でWebデザイナーを目指しませんか? クリエイターに興味があるけどなり方がわからない、Web業界への転職を目指している……という方は、「スクールでの勉強」もおすすめです。将来について悩んでいる方はぜひ一度LIGにご相談ください! ▼少しでも気になる方は、ぜひ公式サイトをご覧ください! さまざまな企画書を盗み見できる Web サイトまとめ 1. alle https://the.alleslide.com ボリュームがすごいです。 2

    企画書・提案書のデザインテンプレートサイト4選 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
    shinpiece
    shinpiece 2015/02/25
    企画書 参考 まとめ
  • 制作ガイドライン

    ガイドラインは、バーンワークス株式会社が行う Web サイト制作全般においての品質を保持するために定めたものである。当社はガイドラインに基づいた制作を行い、クライアントに対して常に安定した品質のサービス、及び納品物を提供する。 Last modified 2023-10-18 ディレクターはクライアントから指定の Web サイト要件を満たし、Web サイトのビジネスゴールを達成するため、適切な情報提供、提案を行う、また Web サイトの情報設計からプロジェクトの進行管理、プロジェクトメンバーの業務管理、納品物の品質管理を適切に行うものとする。 ディレクターはクライアントを含めプロジェクトメンバー間でのコミュニケーションを積極的に取ることで円滑なプロジェクト進行を心がける。また、クライアントに対しては進捗の報告、情報共有を適時、および明確に行い、信頼関係の構築に努める。 新規 Web サ

    制作ガイドライン
    shinpiece
    shinpiece 2015/02/21
    制作ガイドライン ヒアリング まとめ
  • お金をかけないランディングページのつくりかた

    26. DLPOは最適なクリエイティブを数千~数百万通りの組み 合わせの中から発見し、劇的なCVR向上を実現する最先 端LPOツールです。これまでLPOはサイト訪問者が最初に訪れ るページ(LP)を最適化してコンバージョン率を向上させるために、 訪問者の流入元や行動履歴を元にLPの最適化を行っておりまし た。提携では訪問者のデモグラフィック・サイコグラフィックなど の属性データを活用してより精緻にターゲットとなるセグメントごとの LPO を可能にし、同セグメントを活用したコンバージョン率の向上お よび効果的な広告配信を実現いたしました。DMP*3 構築・導入支援 などのデータサイエンス事業の実績と膨大なオーディエンス・多様なセグメン トデータを有するIntimate Mergerと、A/B テスト・多変量テスト・ターゲティン グを駆使し、最適なクリエイティブでコンバージョン率向上を実現す

    お金をかけないランディングページのつくりかた
    shinpiece
    shinpiece 2015/01/30
    ランディングページの作り方
  • HTML/CSS、PHP、jQueryの基礎を学ぶなら超オススメ!プログラミング学習サービス「Progate」

    まずはProgateへアクセスしてアカウントを作成。私はTwitterで認証しました。 現在学べる言語は HTML & CSS PHP jQuery の3言語の基礎部分。 とりあえずHTML & CSSをやってみましょう。 学習の流れ 学習の流れは3ステップ。 スライドで基礎知識を学習 ブラウザ上のエディタにコードを書いて実際に学習 プレビュー画面で実際に挙動を確認→答え合わせ といった感じです。 スライド スライドは非常に丁寧な作りとなっておりますので、よく読みこめば初心者でもしっかりと理解をしながら学習することが出来ます。 矢印キーでページ送りができるのがCool。 1レッスンにつき数枚のスライドが表示されますので、見終わったらエディタ画面へとGO! エディタ画面 こちらがブラウザ上で動作するエディタ画面。左側が問題文、真ん中がエディタ、右側がプレビュー画面となります。 もう一度スライ

    HTML/CSS、PHP、jQueryの基礎を学ぶなら超オススメ!プログラミング学習サービス「Progate」
    shinpiece
    shinpiece 2015/01/20
    HTML JS CSS 学習ツール
  • Web制作者が助かるヒアリングシートや問い合わせ返信に使えるテンプレート - コムテブログ

    TL;DR 遠方のお客様からのサイト制作依頼、メール問い合わせがあった時に、どんな内容を返信すればよくて、どんなことを聞いておけば概算見積もり(初期費用・ランニング費用)を作りやすくなるのか。ヒアリング時も、ある程度聞き出したい。 ネットやでも意外と「具体的な例」がないなぁと思い、今回はコーポレートサイトや EC サイト制作依頼があった時に、メール返信や、最低限クライアントに聞いておきたいことや尋ね方をまとめました。ヒアリングシートにも応用できます。会社によって違うと思いますが、ざっくりとメモしておきますので、後は自分流にアレンジしながらご活用ください。 メール用テンプレート ここからはメール返信用です。 コーポレートサイト コーポレートサイトの制作依頼があった時に、具体的にどんな内容をヒアリング、または聞いておけばよいのか項目をまとめました。聞き出した内容をもとに社内スタッフと共有し概

    Web制作者が助かるヒアリングシートや問い合わせ返信に使えるテンプレート - コムテブログ
    shinpiece
    shinpiece 2015/01/06
    ヒアリングシート メールテンプレート
  • Web制作の仕事をするようになってからお世話になっているサイト&気になっているサイト|今村だけがよくわかるブログ

    Web制作仕事にしようと決めて、勉強を始めたのが今から約8年ほど前だったと思います。その当時から現在まで、大変お世話になっていたり、気になっているWebサイトが多くあります。 今回は、その1部をご紹介します。(サイト名は順不同、敬称略です) buzzword(バズワード) http://www.buzzword.jp/ Web業界に入りたての方がつまずきやすい技術に焦点を当て、解説されている記事が多いです。 例題を交えながら平易な文章で解説されていて、とても親切。ずーっとお世話になっているサイトの1つです。 Attrip http://attrip.jp/ 仕事の休憩時間によく見るサイト。笑うつもりがなくても思わず吹いてしまうネタ記事が多くて、なごみ要素がとても強いです。 という面もあれば、国内外のWebサービスをすぐに試したり、ネット上で話題になっているものをいち早く見つけて記事にした

    Web制作の仕事をするようになってからお世話になっているサイト&気になっているサイト|今村だけがよくわかるブログ
    shinpiece
    shinpiece 2014/11/28
    参考サイト まとめ
  • Web制作者は要ブックマーク!制作時にいろいろと役立つ便利サイトのまとめ

    Web制作時に、あれ?なんだっけな?って時に役立つ便利サイトを紹介します。 HTML5やCSS3の各ブラウザのバージョンごとのサポート状況、スクリーンサイズやデバイスごとのMedia Queriesの書き方、Bootstrap, Foundationなど各フレームワークの対応ブラウザやライセンス、ブラウザの各バージョンごとのCSS Hackなど、いざという時に役立つサイトばかりです。 Can I Use...Support tables for HTML5, CSS3 Can I Useは先月くらいにUIを刷新し、より使いやすくなりました。デスクトップ・モバイル用の各ブラウザでのバージョンごとのHTML5, CSS3のサポート状況がそれぞれ詳しく分かります。

    Web制作者は要ブックマーク!制作時にいろいろと役立つ便利サイトのまとめ
    shinpiece
    shinpiece 2014/09/12
    役立つ ブラウザのバージョンごとのサポート状況 画面サイズ スクリーンサイズ まとめ
  • 新着記事

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

    新着記事
    shinpiece
    shinpiece 2014/08/21
    HTML 無料 テンプレート まとめ
  • Googleが119時間のテストをしてわかった「モバイルサイト設計25の指針」|男子ハック

    @JUNP_Nです。GoogleGoogle AdSenseに関する最新情報を伝える公式ブログ「Inside AdSense」にて、119時間にもわたるユーザービリティテストを行った結果をまとめて公開しています。詳細は以下。 モバイルサイトの最適化は必須!モバイルの特性を理解したサイト設計が必要img via:モバイルサイト設計の指針 Googleがシカゴとサンフランシスコで119時間にもわたるユーザービリティテストの結果をまとめています。調査対象はAndroid、iOSの両方のユーザーで、商品の購入やサイト内を調べるなどの操作を行い、各サイトでの体験を調査委とともに評価したそうです。 関連:スマホに特化したアクセス解析「Pt engine」スマートフォンサイトのヒートマップが凄い! この調査の結果で明らかになったことをまとめたものが「モバイルサイト設計を成功させる25の指針」となってい

    Googleが119時間のテストをしてわかった「モバイルサイト設計25の指針」|男子ハック
    shinpiece
    shinpiece 2014/08/11
    Google モバイル設計指針 まとめ
  • https://services.google.com/fh/files/blogs/principles-of-mobile-site-design-ja.pdf

    shinpiece
    shinpiece 2014/08/11
    設計指針 満足度 コンバージョンの促進 まとめ
  • CNET Japan - mobile

    人気記事 1 「ChatGPT Search」の衝撃--Chromeの検索窓がデフォルトで「ChatGPT」に 2024年11月03日 2 iPhoneに「消しゴムマジック」的な新機能、iOS 18.1で搭載--Xで「便利すぎる」の声も 2024年10月30日 3 M4搭載の最新「Mac mini」「iMac」「MacBook Pro」をさっそく体験 2024年11月02日 4 「Vision Pro」を自腹購入、5カ月目の使用頻度は--長期レビュー 2024年11月02日 5 シャオミ、22.5W出力の10000mAhモバイルバッテリーを1880円で発売 2024年11月01日 6 「ChatGPT」に新たなAI検索機能、無料版でも数カ月で提供へ 2024年11月01日 7 Instagramで「既読」を付けずにDMを閲覧する方法 2024年03月11日 8 東京都、12月11日からQR

    CNET Japan - mobile
    shinpiece
    shinpiece 2014/08/11
    エクセルからテーブル作成
  • displayプロパティを使ってレスポンシブウェブデザインのtableレイアウトを変化させてみる | バシャログ。

    こんにちは。まだ何一つ夏を感じていないmackyです。 今日は、RWDでdisplayプロパティを使ってtableレイアウトのデザインを変化させる方法をまとめてみました。 RWDでテーブルレイアウトを定義リスト風に変化させてみよう tableタグのdisplayの値はデフォルトではtable、thとtdタグはtable-cellとなっていますが、この値をblockやlist-itemなど他の値に変えてみます。 (1) (2) (1)の状態から(2)の状態へデザインを変化させます。 メディアクエリ―を使ってブレイクポイント(480px)を設定し、その中に上書きするCSSを書いていきます。 今回はこんな感じです。 HTML <table border="1" cellpadding="5" cellspacing="0"> <tr> <th>項目A</th> <td>この文章はダミーです。</

    displayプロパティを使ってレスポンシブウェブデザインのtableレイアウトを変化させてみる | バシャログ。
    shinpiece
    shinpiece 2014/08/06
    displayプロパティ レスポンシブデザイン tableレイアウト
  • これはスゴイぞ!Bootstrapのページ作成が積み木感覚で簡単にできてしまうジェネレーター -lollytin

    HTMLCSSの知識は不要! 積み木感覚でレイアウトを組み立てるだけで、簡単にBootstrapのページ作成ができてしまうウェブサービスを紹介します。 ほんの数分で、今時のかっこいいページが当に簡単にできちゃいます!

    shinpiece
    shinpiece 2014/08/05
    Bootstrap
  • これからのWeb制作スタイルとプロトタイプの考え方 - よつば手帖

    近年、プロトタイプやフレームワークと言った言葉をよく耳にします。 どのような変化が起きていて、それに至るまでの考え方や、個人的な見解を書きたいと思います。 閲覧環境と利用者の変化 Webサイトの役割の変化について スマートフォンやタブレットの登場によってWebサイトの閲覧環境は大きく変化しました。 PCの前にわざわざ座り、電源を入れて「さぁ、Webサイトでも見るか〜」から、リビングのソファに座りスマートフォン閲覧するようなスタイルが当たり前になってきました。 Web制作者は常時PCをたちあげてると思いますが、Web業界に関わっていない方はわざわざPCのある部屋に行って見るなんて事は少なくなっていると思います。 コミュニケーション的視点の重要性 Webサイトの価値観や利用状況は変化しているのに、実際にそれらをふまえて制作されている場合は少ないように思います。 利用者の見方が変わって来ているの

    これからのWeb制作スタイルとプロトタイプの考え方 - よつば手帖
    shinpiece
    shinpiece 2014/08/01
    これから プロトタイプ
  • 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

    How To Enable HTML5 In Chrome | Robots.net
    shinpiece
    shinpiece 2014/06/17
    Responsive Grid System
  • Web制作者が捗る!知識が増える2014年トレンドまとめ

    作成:2014/06/9 Web制作 > トレンド感のある動きや、洗練された見え方を実現するために、知っておきたいことや方法など。Web制作の現場で知っておくべきことをまとめました。全部取り入れるのは無理ですが、押さえておくことで今以上に見栄えのするサイトを作れると思います。ここ最近のトレンドをおさらいしたいときに。 エンジニア速報は Twitter の@commteで配信しています。 もくじ ファーストビューで使いたいエフェクト 1.ロングシャドウ 2.ポリゴン 3.ラージフォトスタイル 4.ブラーエフェクト 5.フルスクリーン動画 6.画像シーケンス 脱ビットマップ画像 7.SVG 8.Webフォントを円で囲む 配色・フォント 9.配色(フラットデザイン) 10.タイポグラフィ(フラットデザイン) 11.フォント(フラットデザイン) 効果 12.Infinite Scroll(無限スク

    Web制作者が捗る!知識が増える2014年トレンドまとめ
    shinpiece
    shinpiece 2014/06/09
    2014トレンド