カテゴリー別アーカイブ: Webデザイン

雑談, Webデザイン

WordPressの独自テーマの制作がなかなか難しい件

前回の久々の更新からまた時間が掛かってしまいましたが、最近WordPressのテーマ作成に挑戦しています。
といっても一度完成させたことはありますが、納得いかない部分もあったりしたので、再度自分が納得いくテーマを作ってみようと思ったり。
一応参考にしているテーマに「STINGER8」と「Simplicity」がありますが、ファイル構成がしっかりしているので、逆にあれぐらいの量を作らなきゃいけないのか…とも不安に思ったり（汗

一応テーマ制作で最低限これだけはやりたい！と思うのは、以下の点。

１. テーマにSassを組み込むようにする。
どうもテーマ作成においてはSassを使うのはちょっと厄介な部分が多かったりするのですが、css・scssファイルの分割のやり方を工夫すれば上手くいくかもしれません。
参考にしているテキストはインプレス制作の「Web制作者のためのSassの教科書」。この中にファイル分割のことも記載されていたので、個人的にはおすすめの１冊。

Web制作者のためのSassの教科書改訂2版 Webデザインの現場で必須のCSSプリプロセッサ [ 平澤隆 ]

価格:2,592円
(2018/10/3 20:34時点)
感想(0件)


２. Bootstrapが使えるようにする。
これはボタン関係を効率よく作りたい等の理由がありますが、style.cssと同様のやり方で読み込めばある程度は上手くいくのかな…(^^;;

３. 多階層ドロップダウンメニュー
これはBootstrapでも納得のいくデザインが出来ないため、普通に難しい（滝汗）

以上の点が解決して良いテーマさえ作れれば、本格的にWordPress運用に移行できるのではないか、と個人的に考えています。（だったら初めから既存の無料テーマ使えとツッコミ入りそうですがｗ）

広告
IT関連, Webデザイン

『Photoshop CC 19.1』の最新機能『被写体を選択』を試してみる

暫く更新をサボってました（

早速ですが「Photoshop CC」が先日更新され、人工知能「Adobe Sensei」により被写体を一発で切り抜くことができるツールが使用可能になったということで、使ってみることに。

Adobe Photoshop CC、ワンクリック選択をサポート――Sensei AIが対象を認識 | TechCrunch Japan

キャプチャ1

テスト用の素材として、「GTSport」のリバリーエディターモード使用時に撮影したスクリーンショットを使いました。
Photoshopを起動し、メニューバー「選択範囲」⇒「被写体を選択」をクリック。

キャプチャ2

被写体の影の部分が残るなど若干切り抜きが粗いものの、とりあえずワンクリックで概ね良い感じには切り抜きが出来るようになりました。あとは自動選択ツールなどで仕上げれば何とかいい感じに仕上がるのではないかと。
まだ出来たばかりの機能ですが、今後「Adobe Sensei」の精度が上がればさらに綺麗な切り抜きが容易になるかもしれませんね。

雑談, Webデザイン

孤軍奮闘

Webデザインの勉強の進捗状況。

HTML5とかCSS3は慣れてきた方だと思うけど、PHPとかJavaScript辺りのプログラミング言語は結構難しくて苦戦中。
自分で独学という選択をした以上は何とか踏ん張らなければ。

あとはGTSportのユーザーデカール作成でも使っているIllustratorはともかく、Photoshopも使い慣れていきたいけど、これもGTSのロケーションフォト辺りも使って練習できるかしら。

Webデザイン, 書籍

Webデザインの学習に使っているテキスト（Illustrator/Photoshop編）

以前HTML5・CSS3の勉強に使用したテキストを紹介しましたが、今回はこれ。

瀧上園枝・著『WebデザインのためのPhotoshop+Illustratorテクニック(CC 2017対応版)』

WebデザインのためのPhotoshop+Illustratorテクニック(CC 2017対応版)

WebデザインのためのPhotoshop+Illustratorテクニック(CC 2017対応版)

posted with amazlet at 17.11.18
瀧上 園枝
エクスナレッジ (2017-03-30)
売り上げランキング: 81,049
Amazon.co.jpで詳細を見る

目次

Chapter1:Webデザイン+Photoshop+Illustratorの基礎知識
Chapter2:ワイヤーフレーム制作で使えるテクニック
Chapter3:画像処理に使えるテクニック
Chapter4:パーツ制作で使えるテクニック
Chapter5:カンプ制作で使えるテクニック

本著はIllustrator・Photoshopの使い方のうち、Web制作における効率の良いテクニックを紹介しており、サンプルデータを操作しながら技術を習得する仕組み。
内容がWebデザインに特化しており、ポートフォリオを制作していく上で、作業の効率化を図りたい人にはお勧めの一冊だと思います。

但し、冒頭に「Illustrator・Photoshopの基本操作ができる方が対象としています」と書かれており、どちらかというとIllustrator・Photoshopの基本操作を一通り習得した人のための応用的なテキストであるため、別の著書などで基本操作を一通り学習した上で購入したほうがよさそう。
あとはカンプ制作・ワイヤーフレーム制作についても書かれているため、読む前にWeb制作の流れをちゃんと理解していないと、読み始めでちょっと苦労するかもしれません(^^;

ai2.PNG
ちなみにこの本のやり方を参考に、試しに制作したオリジナルのブログパーツがこちら。
まだまだ頑張らないと(^^;

Webデザイン, 書籍

Webデザインの学習に使っているテキスト（HTML5・CSS3編・その１）

先日のWebデザインの話に関連して、現在のWebデザインの勉強に使っているテキストを、今後完走次第で随時紹介していこうかと考えているところ。

今回はその基礎となるHTML5・CSS3関連のテキストについて。

「HTML&CSSとWebデザインが 1冊できちんと身につく本」著・服部雄樹

HTML&CSSとWebデザインが 1冊できちんと身につく本

HTML&CSSとWebデザインが 1冊できちんと身につく本

posted with amazlet at 17.11.03
服部 雄樹
技術評論社
売り上げランキング: 2,518
Amazon.co.jpで詳細を見る

オススメ度：★★★★☆

Webデザインの基本となるHTML5・CSS3のビギナー向けの学習用テキストであり、実際に複数のレイアウトパターンのWebページを制作しながら学習をすることが可能。また、テキスト終盤ではレスポンシブデザインについても触れています。
本書ではテキストエディタのBracketsの使用を前提としていますが、他のエディタ環境で慣れている人はそれでやっても問題ないかと。
ただ、基本的なHTMLタグやCSSプロパティについては序盤でさらっと紹介しているような感じもするので（一応巻末にプロパティ一覧はあるけど）、学習の際に特に重要なHTMLタグやCSSプロパティはその都度ノート等に纏めておくのも手かと思います。

さて、自分も今日無事にこのテキストを完走しましたが、もう少し発展的なWebサイト制作にも挑戦したいので、次はもう１つ応用的なテキストもやってみようと思います。
あとはJavaScriptの学習にもすでに取り掛かってるけど、HTML5・CSS3と比べると結構難しいです(^^;;

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

posted with amazlet at 17.11.03
エビスコム
ソシム
売り上げランキング: 7,220
Amazon.co.jpで詳細を見る