プロジェクトの関係者でないとなかなか目にすることができないワイヤーフレームやユーザーフローもdribbbleだと、たくさんアップロードされています。 最近のWeb制作の参考になりそうなワイヤーフレーム・ユーザーフローを紹介します。
![最近のWeb制作の勉強になる!Webサイトのワイヤーフレーム・ユーザーフローのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/cf52fa39add523000b90704d1832f905eaf90609/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016040811-01.png)
WordPressはPHPの知識無しでも利用できますが、ちょっとしたカスタマイズをする際、テーマのカスタマイズ、テンプレートファイル、テンプレートタグ、子テーマを使った拡張、function.phpの設定など、PHPは避けて通れません。 WordPressのテーマづくりに必要なPHPの使い方が初心者でもやさしく学べるオススメの本を紹介します。 ここ2, 3年触っていない人も、けっこう変化しているので要チェックです。 本書はHTMLやCSSはひととおり分かるけど、PHPが苦手という人を対象にしたものです。WordPressをカスタマイズできるようにPHPの知識がゼロでもテーマを作成・カスタマイズしたい人にぴったりな一冊です。
Webサイトやスマホアプリのレイアウトの構成・展開、UIエレメントのバリエーション、カラーの使い方など、デザインの定義がまとめられたスタイルガイドを紹介します。 ロゴやブランディングも引き出しを増やすためにも参考にしたいですね。
HTMLは汚さずに、ヘッダ、ナビゲーション、サイドバー、ボタンなど、さまざまな要素をスクロールした際に指定した位置にぴたっと貼り付けるスクリプトを紹介します。 IE7+からサポートされており、「position: sticky;」の代替になる便利なスクリプトです。 Fixed Sticky- GitHub Fixed Stickyの特徴 Fixed Stickyのデモ Fixed Stickyの使い方 Fixed Stickyの特徴 Fixed Stickyで貼り付ける要素の位置は、親要素に依存します。 つまり、スクロールしてぴたっと貼り付く位置は、常に親要素となるコンテナ内です。 基本的な動作を見てみましょう。 まずは、要素に「top: 20px;」を指定してみます。
250種類以上の飾り罫、区切り線が揃った無料素材を紹介します。 文字周りを飾ったり、アクセントとして利用したり、背景に添えたり、そのままでもパーツを組み合わせても楽しめる素材です。 Text Dividers and Enhancers: Lisa Glanz Text Dividers and Enhancersの中身 Text Dividers and Enhancersのダウンロード Text Dividers and Enhancersの中身 ダウンロードできる素材のフォーマットは、2種類。 ベクター(.ai) ラスター(.png, .jpg) すぐに使えるPNGやJPEG画像、加工ができるAIファイルも完備されています。 素材には数多くの飾り罫、区切り線、パターン素材が含まれています。
classを加えるだけでさまざまなアイコンが利用できるFont Awesomeを使って、各アイコンのデザインに合ったかわいい動きをアニメーションで与えるスタイルシートを紹介します。 ベルはリンリン♪、いいねは上下に、スピナーはぐるぐる動きます。 Font Awesome Animation 左はアニメーションのトリガーをページのロード時、右はホバー時にしたものです。 Font Awesome Animationの使い方 Step 1: 外部ファイル Font Awesomeと当スタイルシートを外部ファイルとして記述します。 <link rel="stylesheet" href="font-awesome.min.css"> <link rel="stylesheet" href="font-awesome-animation.min.css"> Step 2: HTML まずは、Font
個人のブログやギャラリー、プロダクトやアプリのランディングページ、企業サイト、Eコマースまで、多目的に使える高性能なWordPressのテーマファイルを紹介します。 通常は$150の有料素材ですが、今週末まで無料なので、ダウンロードはお早めに! 約16,000円、個人では気軽に購入できる値段ではないですね。 Rareは多目的とある通り、さまざまなレイアウト、コンポーネント、機能が用意されています。 レイアウトは1カラム、2カラム、3カラム、4カラム、カード型のMasonryが揃っており、トップページをはじめ、さまざまなコンテンツのページで利用できます。
CSSアニメーションは確実に進化しています。 ユーザーを楽しませるだけでなく、ユーザーの注意をつかみ、サイトのゴールに導くための重要な手段にもなります。 単調なアニメーションではなく、キーフレームを使い、タイミング・ディレイ・反復・方向・「will-change」機能を使ったCSSアニメーションの実装のポイントを紹介します。 How to Use CSS Animations Like a Pro 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. キーフレーム 2. アニメーションのタイミング 3. アニメーションのディレイ 4. アニメーションの再生状態 5. アニメーションの反復回数 6. アニメーションの方向 7. アニメーションの塗りつぶしモード 8. 「will-change」機能 9. CSSの4つの重要な値 1
2016年11月1日に勧告化されたHTML5.1ではレスポンシブイメージの要素などが追加され、定義されている要素が108個から113個に増えました。また、HTML5では見出しをすべてh1要素で統一することも可能でしたが、HTML5.1では見出しの階層を無視した使い方がされ、見出しの階層は合わせるべきと定義されています。 今持っているHTMLのリファレンス本は、HTML5対応ですか? 現役の人はリファレンス本を購入するタイミングが難しいですが、古い本を持っている人に特におすすめしたいコーダ−必読のリファレンス本を紹介します。 こういったリファレンスは、2段階の利用方法があると思います。 最初は基礎知識を身につけるため、いわゆる勉強で、初心者の人が活用する段階です。2つ目は、現役のコーダーが手元に置いておく段階です。調べるためという利用もありますが、暇があればリファレンスを開いたり、定期的にリ
オリジナルのアイコンを作るシンプルで簡単なデザインテクニックを紹介します。 円や矩形などの基本的な形を組み合わせたり、変形させたりして、さまざまなアイコンを作成します。 作業に慣れてしまえば、どれも1分もかからずにアイコンを作成できます。 The Super Simple Guide to Iconography 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 目のアイコンの作り方 矢印のアイコンの作り方 バッテリーのアイコンの作り方 箇条書きリストのアイコンの作り方 クラウドのアイコンの作り方 次に進むのアイコンの作り方 ファンネルのアイコンの作り方 プレイ・ポーズのアイコンの作り方 位置矢印のアイコンの作り方 位置ピンのアイコンの作り方 サウンドのアイコンの作り方 ウェーブのアイコンの作り方 Toptalのアイコンの作り方
CSS Flexboxとは水平または垂直に要素を配置し、柔軟なレイアウトを実現できるCSSのレイアウトモジュールです。複雑なレイアウトでも今までより少ないコードで、よりシンプルなプロセスで実装することができます。 CSS Flexboxの基礎知識、Flexboxの各プロパティがどのように機能するのか、Flexboxでどのようにレイアウトを実装するかを視覚的に解説します。 【アップデート: 2022年6月16日】 IEがサポート終了したことにあわせて、修正しました。 【アップデート: 2021年8月1日】 Flexboxの解説を2021年の現状にあわせて、修正しました。 【アップデート: 2020年8月23日】 Flexboxの解説を2020年の現状にあわせて、修正しました。 【アップデート: 2019年3月27日】 Flexboxの解説を2019年の現状にあわせて、修正しました。 【アップ
デスクトップ、タブレット、スマホに対応した、通常のスタティックなヘッダやスクロールしても常に上部・下部に固定表示されるバーとして配置できるナビゲーションを実装するスタイルシートを紹介します。 スクリプトは一切無し、アニメーションも快適な超軽量のスタイルシートです。
Webデザインの今が分かる良書「Webデザイン必携。」が、Kindleセールでかなりの激安です。 デザイナーとしてWeb制作で役立つ必須知識、基本的な考え方、効率的なデータの作り方など、制作の現場ですぐに役立つ知識やテクニックを身につけることができる一冊です。 表紙のデザインは、完全に生ビールです! 参考写真: 写真AC ※版元様に許諾を得ています。 ここ数年で、Webデザインは大きく変わりました。 ビットマップからベクターが主流になり、ページはマルチデバイス対応、パララックスなどのインタラクション アニメーション、最小要素からデザインする「Atomic Design」など、成果物やワークフローも進化を続けています。 本書は制作現場のナマの知識が学べ、Webデザインの初心者だけでなく、現役でバリバリ活躍している人にもオススメの本です。 Kindle月替わりセールで書籍版の半額以下、さらに2
Photoshopで一番多くおこなう操作といえば、レイヤー操作という人も多いでしょう。 そんな時に、レイヤーやフォルダのコピペが簡単にできたらいいな、と思ったことはないですか? レイヤーやフォルダのコピペが同じドキュメント内、異なるドキュメントにもできる無料の機能拡張を紹介します。 レイヤーは一つでも、複数でも簡単にコピペできるようになります。 Copio Copioのインストール Copioの使い方 Copioのインストール CopioはWinとMac対応、Photoshop CCにインストールできます。 ますは、下記ページのちょい下「Free Download」からファイルをダウンロードします。 Copio インストール インストールはちょっと面倒かもしれません。 ダウンロードした「Copio 1.0.zip」を解凍。 「Copio 1.0」内にある「Copio」をフォルダごと下記に移
デザイナーにとって貴重なデザインの知識やテクニックをはじめ、なかなか得ることができない現場の舞台裏まで、非常にくわしく解説されたオススメの本を紹介します。 ロゴ、ブランド・アイデンティティ・デザインを通して、デザイナーにとって実用的なスキルを磨くことができ、制作意欲を刺激する一冊です。 ロゴデザインに関係ないデザイナーにもかなりお勧めします。 本書の情報量は非常に濃い! デザインの最初の一歩でもある契約成立やヒアリングから、どのようなデザイン仕様書を作成し、その内容に沿ったデザイン案を生み出し、クライアントにどのように提出し、承認を取り付けたか、そういった貴重な細部の情報までくわしく解説されています。 もちろん、ロゴのビジュアル、カラー、タイポグラフィも非常に充実しています。 自分への贈り物、大切な人への贈り物としても、うれしい一冊です。
PhotoshopでWebデザインのワークフローを効率的にするために、プロのデザイナーが実践している8つのテクニック・方法を紹介します。 Adobe CCのライブラリをもっと活用しよう、と思いました。 8 ways to design sites faster in Photoshop 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. ファイル管理のポイントは構造化 2. CSSフレームワークは勉強になる 3. PSDのレイヤーはコンテンツごとにフォルダ分け 4. よく使う操作はショートカットを覚える 5. Adobe CCのライブラリは使わないと損 6. イメージとベクターはスマートオブジェクトで 7. スタイルガイドをどう活用するか 8. コーダーと、そしてチーム内での共同作業 まとめ: デザインは正直に 1. ファイル
スマホやタブレット、ラップトップ、デスクトップ、最近はWebページを表示するデバイスは多様化しています。レスポンシブデザインでよく使われているMedia Queries(メディアクエリ)の書き方、ブレイクポイントの最適な値など、制作に役立つリソースやツールを紹介します。 各デバイスのブレイクポイントに合わせたメディアクエリの書き方 複数のブレイクポイントを使ったメディアクエリの書き方 人気のフレームワークのブレイクポイントの設定 レスポンシブの確認が簡単にできる最強ツール 各デバイスのブレイクポイントに合わせたメディアクエリの書き方 スマホ、タブレット、ラップトップ、デスクトップごとのブレイクポイント、そしてiPhone, iPad, Nexusなど各デバイス用のブレイクポイントに合わせたメディアクエリの書き方がまとめられています。 Simple CSS Media Queries デバイ
ユーザーのためのデザインが重視される現在、Webやスマホにおけるユーザビリティについて、実例を交えながら、超明快にすっきりと分かるオススメの本を紹介します。 今、そしてこれから取り組むWebサイトやスマホアプリのユーザビリティを改善する手立てに。また、自身のキャリアパスを広げることができる何度も読み返したい一冊です。 本書は世界的ベストセラー「Don't Make Me Think」の第3版(2014年刊行)の翻訳版で、米Amazonでは2017年7月現在でもベストセラーの常連です。 著者は、Appleなどを顧客としてきたユーザビリティコンサルタントの第一人者。 デザインに関わる人なら誰でも知っておくべきユーザビリティの基本原則が楽しく学べます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く