タグ

WEB制作とレイアウトに関するpanchooのブックマーク (6)

  • ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP

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

    ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
  • 絶対見ておきたい有名企業のスマホサイトまとめ (1/5)

    この記事で取り上げているスマートフォンサイトの「BEFORE & AFTER」を以下の記事で紹介しています。合わせてご覧ください。 日のスマホサイトは2年間でこんなに変わった iPhoneAndroidの普及を背景に、スマートフォンのブラウザー向けにコンテンツや表示を最適化した「スマートフォンサイト」(スマホサイト)を開設する企業が増えている。当初はiPhone(iOS)の標準UIに倣った画一的なデザインが多かったが、最近では独特のレイアウトや斬新な色使いの個性的なスマートフォンサイトも増えてきた。 ここでは、Web制作者が見ておきたいスマートフォンサイトを紹介する。実務で参考にできるように、対象を日語の企業サイトに絞り、業種別に分類してまとめた。スマートフォンサイトの制作に入る前にチェックしておこう。

    絶対見ておきたい有名企業のスマホサイトまとめ (1/5)
  • デザインを勉強したことがない人でもデザインできるようになるかもしれない4つの基本原則

    このブログ、Webデザインレシピのデザインをリニューアルしました。 この機会にデザインを勉強したことがない人でも、楽しくデザインをすることができるかもしれない、基原則 4つをご紹介します。 この原則は「ノンデザイナーズ・デザインブック」著者 Robin Williams で詳しく解説されています。 古いですが、とっても素晴らしいで今では新装増補版となって発行されているようです。 今回、このブログ – Webデザインレシピのデザインを、ガラッと変えてみました。これを機会にちょっとデザインの基というか、デザインをするときにガイドとなる、4つの原則をおさらいしておきます。Webデザインに限らず、会社で提出する報告書や学生さんのレポート、レストランのメニューなど、ページと呼べるものには全部当てはまると思うので、Webサイトを作るとかじゃなくても、知っておいて損はないかもしれませんね。 せっ

  • わずかな時間でユーザーの注意を惹きつけるウェブデザインの7つのポイント

    ユーザーがウェブサイトを訪れる時間はわずかなものです。その短時間の間に、ユーザーの注意を惹きつけ、印象に残るようにするための7つの方法を紹介します。 Billboard Web Design: How to Win Your Audience's Attention [ad#ad-2] 下記は各ポイントを意訳したものです。 元記事では他の事例やビルボードの素材も紹介しています。 はじめに 1. クリエイティブとユニーク 2. 説得力のある見出し 3. 巧妙さと辛辣さ 4. ブランディングを印象づける 5. 注意を惹きつけるアイキャッチ 6. ポイントはクリーンでシンプルでストレートに 7. 明快さとコントラスト はじめに 人の目を惹くビルボードスタイル(立て看板)の広告は目にした瞬間、簡単に人々の記憶に残り、楽しいものです。イメージのカラーやフォントも重要ですが、アイデアにもユニークがあり

  • コーディングのスピードを上げる為の6つの方法

    2017年7月25日 Webサイト制作, 便利ツール 今より少しでもコーディングを早くできれば、細かいデザインや機能にも時間をかけて取り組めそう…という事で今回はコーディングのスピードを上げるためにできる事を紹介します。便利なツールを使ったり、ちょっとやり方を変えるだけでより早くコーディングができるようになると思います! ↑私が10年以上利用している会計ソフト! 1. コーディング手順を簡略化する これは自分のコーディング能力を高めて手順を省く、便利なツールを使って手間を省くという事です。例えば私は昔このような手順でコーディングを進めていました。 CSSのレイアウトをノートに書き出す レイアウト部分(ヘッダー・メイン・サイド・フッター)のHTMLマークアップ CSSでレイアウト部分のスタイリング 表示確認 うまく表示できない箇所の修正 ヘッダー内のHTMLマークアップ CSSでヘッダー内の

    コーディングのスピードを上げる為の6つの方法
  • レイアウト作りを簡単にしてくれるCSSグリッドシステム

    CSS でのレイアウト、段組み作りがとっても簡単にできる、CSS グリッドシステムをご紹介。既に使っている人もたくさんいるとは思いますが、未体験の人はぜひ試してみてくださいね! Web デザインに欠かせない、CSS でのレイアウト作り。コンテナ作って、ここにラッパー作って、メインが 600px で padding が 20px だから、サイドバーが、えーと … なんてことになりがちです。そんな面倒な作業がイヤだなーという人におすすめなのが、CSSグリッドシステム。全ての Web デザインに使える訳ではありませんが、結構重宝します。すでに使っている人もたくさんいると思いますが、こんな方法もあるんだよーということでご紹介します。 1. CSSグリッドシステムとは? CSS グリッドシステムというのは、レイアウトを均等に分けて、マス目上に考えるレイアウト。何が便利かっていうと、この段は4等分にし

  • 1