読みました。
多分ブログ更新頻度減るので、読んだ本の要約、というかメモをするのみの記事をたくさん作ってみます。
打ち合わせは何かを必ず進める場であり、仕事の本番である。
準備をして本気で取り組まねばならない。
・打ち合わせではとにかく発言すること。間違ってもいい。
・感じたことをできるだけ口に出すようにする。黙っているのは有害。
・論理的に考える訓練にもなる
・打ち合わせに際して、ノイズはできるだけ取り除く。
・そういう意味でビジネスマナーや、時間通りにきちんと始めるなどは重要
・否定するときは代案を出すこと
*ご注意、この記事はデザイナーを否定する記事ではありません。
*逆に、お金にならない仕事を受けずに済むのでとってもよいですよ。
上記URLからアクセスできます。
Googleアカウントや、Facebookアカウントを持っている場合はすぐに使い始めることが可能です。
Web上で、チラシ・ポスター・バナー等々が作れるサービスです。
Facebook、Instagramなどの主要なサービスや、定番の印刷サイズが用意されていますので、
設定で迷うことがありません。
また、制作物の元にできるテンプレートデザインが豊富に用意されています。
画像は「マーケティングチラシ」のテンプレート。
元から入っている文字は英語ですが、もちろん日本語の文に差し替えることが可能です。
英字フォントが、それはもう当然のように充実しているのですが、
日本語のフリーフォントもめちゃくちゃいっぱい入っています。
簡単なレイアウトバナーくらいだったら、イラストレーターを使わずに、このサービスを使ってしまったほうが楽なんじゃないの？というくらいです。
このサービスの基本的な課金方法は利用した写真の購入です。
一見するとアコギな感じがしてしまいますが、実際使ってみると豊富で高品質な写真のおかげで簡単にクオリティが高くなりますので、デザインを依頼することを考えるくらいならこれくらいいかな？
という心理にさせられます。よくできています。
写真は自分のアップロードしたものが使えますし、その場合お金はかかりません。
また無料の写真素材も結構豊富に揃っています。
写真素材に関しては、フリー素材サイトと組み合わせると「つよい」です。
「いらすとや」とか「ぱくたそ」とかね。
画像の差し替えも、すでに設置してある画像や、四角い枠に向かって素材をドラッグするだけです。
デザインをやってるとかなーり多いことなのですが、デザインデータを紛失することがあります。
このサイトでは作ったものがバシバシと自然に保存されていきますので、一年後とかにまたあのデザインのチラシ作りたいなーというときも困ることはありません。
instagramのような画像のフィルターがけもできます。
また、複数のページを持つデータの作成も可能です。
縦書きは流石にできないようですが、マニュアルのような小冊子も作成可能です。
作ったものはWeb上で使うなら画像データ、印刷で使うのであればPDFデータとして保存できます。
保存時に、制作物に使った有料素材を購入する必要がありあます。
試してみたところ、PDFデータは「Illustrator」で開くことができました。
制作に使ったフォントさえ入れれば、Illustratorで続きをデザインすることができると思います。
文字データは編集できる状態ではなかったですが。
pro版にすると、アニメーションをつけられたりさらに便利な機能が使えるようになるようです。
雰囲気的にすごくいい感じのものが簡単にできます。
でもやっぱりちゃんと効果があったり、めちゃかっこいい/きれいなものはちゃんとデザイナーに作ってもらう必要があります。
依頼してくる人の中には
自分で作りたい！って欲求を持ってる人もいますので、そういう場合はこのサービスを紹介すると喜ばれます。
大変ありがたいです。（お金にはなりませんが労力を割かなくて済みます）
便利なものは活用して、うまいこと乗り切っていきましょう！
phpファイルを一個置いてあげるだけでOK!楽ですね。
http://smkn.xsrv.jp/blog/2014/01/introduce-adminer/
ファイルをFTPでアップしたらデータベースのアクセス情報を入力するだけです。かんたんー
ファイルの編集が終わったらファイルを消しちゃえばセキュリティ的にも問題なしです。
縁あって Adobe Animate Meetup Tokyo をみてきたよ。
内容は、Adobe Animateのプロダクトマネージャさんが今後の展望について語り、クリエイターのトークと座談会でした。
Flashプレイヤーが終了決定しており、制作ソフトも名前が変わってしまいました。
この調子では、ソフトなくなっちゃうんじゃないの？
学んでも無駄じゃないの？
という感じでどんどん影が薄くなってきているのです。
しかし、海外では結構使われているようで、netfrixやamazon videoのオリジナルコンテンツ制作にも多数使われているようです。
昔はゲームを作ったり、サイトを作ったりするソフトでしたが、
いまは主体は「アニメを作成するソフト」に舵を切っているようです。
昔のようなこともできるようですけどね。
いままで広報に力をいれてなかったのも、中途半端なものを推していっていいものか・・・という葛藤がAdobe側にもあった模様。
現在はプロダクトがいいものに仕上がってきたという自負があり、どんどん宣伝していくし、日本語のチュートリアルについても検討したいというようなことをいってました。
Flashの方が得意だけどAfterEffectsを使っている方は結構いるかもしれません。
現在は書き出しファイルのswfをAEなどで読み込んで使えるそうなのですが、今後は.flaファイルがそのまま読み込んで利用できる模様です。
これは昔フラッシャーだった人にとって大きいのではないでしょうか。
製作者はとにかく今までのやり方でコンテンツを作ってもらい、
かきだし形式だけはいろいろ選べたり、独自の形式で書き出すSDKの開発もしてるというようなことも言ってました。（よくわかんなかったですけど）
HTML5に動的な形でコンテンツを設置できたりもするので、Animateを使ったゲームなどがまた復活してくる可能性があります。
現在でも動くバナーはよく作られており、書き出し形式に関してもAMPに対応するなど進化していっているみたいです。
Animateは消えゆくコンテンツではないようです。
昔フラッシャーだった方はノウハウの動画なんかをまた作ってみるのもいいかもしれませんよ！
少し触ってみました。
いまスターターキットというのが配布されているようですので、使ってみるといいです。
https://www.adobe.com/jp/products/xd.html#starterkit
初級編と中級編に別れてまして、
初級編はグラフィックツール初心者に向けた使い方。
中級編は +XDらしさのあるツールの使い方って感じです。
Adobeツールになれている人ならとくに詰まる所はないでしょう。
簡単にパスワード付きの共有がかけられるのがすごく便利に感じました。
また、知らなかったのですが、制限付きですが無料で使えるみたいです。
これはすごくいいですね。
コーディング専門の人とかでもXDでファイル渡せば万事OK。すごくらくです。
アートボード外にいろんなコメントを書くことも可能なので、工夫によっていろいろな使い方ができそうです。
コーディング側としては、画像の切り出し方法を覚えればOKかなと思います。
便利なバッチ機能などあるので、うまく使いこなせば非常に良いのではないかと思いました。
今度実際に使ってから気づいたことをここに書いていきたいと思っています。
読みました。
とりあえず業務で使えるようになりたいーという場合は、すごくいいと思います。
Gitというわけのわからないものがなんとなく全体を把握できたような気分になれます。
まずどんなものかわからない、何に役立つのかわからないというのは解消できると思います。
つぎに「コミット」「プッシュ」はできるけど
「プル」「マージ」をした時にエラーが起こってどうにもならん！解決はどうしたらいいの？？
ってなります。
結局のところ、マージした時のエラー（コンクリフト）はエディタで修正してコミットしてからもう一度マージすればいいらしいです。
また、過去のバージョンに戻る方法がわからなかったのですが、「チェックアウト」すればよいということがわかりました。
マージをする前にもブランチをチェックアウトで移動してからマージするというのもよくわかりました。
また、ブランチってなにー？どう扱えばいいのーというのも、コンクリフトの解消方法がなんとなくわかったことでスッキリ解消しました。
Gitはわかった範囲のことを習熟して利用していけば良いものだそうです。
周りに詳しい人がいればその人に管理を頼めばいいですしね。
業務でとりあえず使いたいけどわけわかんないという場合は、とりあえず読んでおくといいと思います。2400円で概要が理解できるのであれば安いものです。
全体を理解をできるものではないのでしょうが、Gitは最初の障壁がばり高いので・・・。
書籍の中ではGithubはプライベートリポジトリ有料と書いてありますが、
今は3ユーザー共有までは無制限で利用可能なので、少人数開発であれば普通に使えます。
コミットまではわかってたんですけど、元に戻す方法がよく理解できてませんでした。
とあるコミットの時点に戻るのは「チェックアウト」という処理になります。
git checkout 「チェックアウト先」チェックアウト先ってどこに書いてあるねん・・・。
githubならここにかいてあります。
または
git logとやるとおなじ文字列が取得できます。
* git logは「q」を打ち込むと抜けれます。
画像の例なら
git checkout fb9d2fbd7a8f4b293624af07e8f7ad96ee9c43e6とやるとその地点に戻れます。
戻したものを、戻す前にいくにも同じ「git checkout」で移動できます。
もしかしたら昔からあったのかもしれませんが、めちゃ便利やん！と気づいたのでメモです。
マップで行き先検索することありますよね？
その時に実際利用する時刻に設定して経路検索をしましょう。
おそらくこの機能はスマホのみ可能です。
経路の結果が出てくると思いますが、
一番いい経路を選んでタップしてください。
結果の下の方をみると
カレンダーに追加できたり、出発時間の通知を行うことができます。
カレンダーはiphoneで使っていれば、googleカレンダーだけではなく、付属のカレンダーにも追加可能です。
追加しておくと、いい感じの時刻に教えてくれます。
絶対に遅刻しちゃいけない時や、旅行の時に使ってみてはいかがでしょうか？
終電検索機能もありますので、終電を設定しておいて通知させるという使い方もいいかもしれませんね。
gulp で スタイルガイド を作成します。
frontnote というのが良さそうなので試してみます。
今年時点でめっちゃいい記事ありました。
こりゃ記事を書く必要ないなー。
手順通りやればできると思うので以下はスタイルガイド についてです。
npm install --save-dev gulp-frontnoteこれでインストールできます。
gulpファイルに以下を追記
var frontNote = require('gulp-frontnote');
gulp.task('doc', function() {
gulp.src('sass/**/*.scss') //scssファイルの場所
.pipe(frontNote({
out: './_styleguide', //生成ファイルの場所
css: ['../css/style.css'] //cssファイルの場所
}));
});どうやらSCSSファイルのコメント元に文書が作られるようです。
下のCSSはスタイルガイドに実際に読み込まれるものです。
.scssファイルを基にしてスタイルガイドページが生成されます。
タブを増やしたい場合は.scssファイルを追加すればいいです。
1ファイル1タブです。
コメント内で、マークダウンっぽい記述で文書を作っていきます。
_parts.scss
/*
#overview
パーツ素材
*/
/*
#styleguide
ボタン
.btn
ボタンです。aタグにつけてください。
@エレメント
```
<a href="" class="btn">ボタン</a>
```
*/
/*
#styleguide
文書
Pタグを使ってください
@エレメント
```
<p>Pタグです</p>
```
*/上記のようなコメントを書いてください。
#overviewの下のコメントがページの見出し。
#styleguideの下の文が項目の見出しっぽくレイアウトされます。
colorを簡単に表示したりなどもできるみたいです。
項目ごとにコメントを分けないといけないっぽい？たぶん。
.scssはコメントの中身のみ読み取られる感じです。cssの記述はページ生成に影響ありません。
実際のcssは↑で指定したものが読み込まれるので、スタイルガイド のために別でファイルを作るというのも全然ありだと思います。
コメントは圧縮すれば消えると思うので、製作時にこまめに記述していくのもありなのかもしれません。
HTMLテンプレートエンジンである、pugは試したことがあったのですが、wordpressとそんなに相性がよくなく、魅力を感じていませんでした。
しかし、ejsはすごくPHPっぽい感じですのでちょっと調べてみようと思いました。
pugは性質上、閉じタグが必ずできてしまします。そうすると、閉じタグなしのパーツ切り分けをしたい場合にどうしたらいいかよくわかりません。
工夫すればうまくできるのかもしれませんが、工夫する意味を考えてしましますね・・・。
HTMLの書き方で、変数やincludeが使えるというイメージです。
なのですごくPHPっぽい書き方で構成できます。
視認性がめちゃくちゃ悪い。
普通のタグっぽくてあんまり好きじゃないんだよな。
この辺はエディタで解決できるかもしれません。
基本的には、サーバー上で動かすのを想定しているようなので
静的なファイルの生成(HTMLやPHP)を作るにはgulpを使う必要がある。
ちなみにvs codeにこれを入れた
https://marketplace.visualstudio.com/items?itemName=DigitalBrainstem.javascript-ejs-support
node/npmはインストール済みとして進める。
sudo npm install --save-dev gulp-ejs gulp gulp-rename
mkdir src src/ejs src/scss dest
touch src/ejs/_header.ejs src/ejs/_footer.ejs src/ejs/index.ejs gulpfile.jswordpress云々といってますが、とりあえずLPを構築してみたいと思います。
gulpfile.js
'use strict';
const gulp = require('gulp');
const fs = require('fs');
const rename = require('gulp-rename');
const ejs = require('gulp-ejs');
gulp.task("ejs", function () {
return gulp.src(
["src/ejs/*.ejs", '!src/ejs/_*.ejs']
)
.pipe(ejs(rename({ extname: '.html' })))
.pipe(gulp.dest("dest"))
});尻切れとんぼですが、src/ejs/ にindex.ejsファイルを入れて
gulp ejs でコンパイルできます。
一番シンプルにnpmでコンパイルしてみよう。
ディレクトリを作って次のコードを実行。
なお、nodeとnpmはインストール済みとして進める。
npm init
sudo npm install node-sass -gnpm init では適当にすすめると package.json ができます。
-g (グローバルインストール)しないと動かなかったです。
適当なscssファイルを用意します。
style.scss
$my-color: #ff0000;
body {
color: $my-color;
}ではコンパイルします。
scssファイルと、出力後のcssファイル名を指定すればokです。
node-sass style.scss style.cssちゃんと style.cssが生成されればOKです。
シンプルなものは上記ですが、いろいろオプションをつけて使うには、以下の記事を参考にするといいと思います。
https://its-office.jp/blog/sass/2018/05/12/node-sass.html
mkdir common common/css _sass
touch _sass/styles.scssを実行すれば良いです。
フォルダ構造変えたい場合は、package.jsonのファイルパスやファイル名を変えると良いです。
個人的にはAdobeのCCを契約していて問題ないです。
( 2019年 8月現在、就職してフリーの仕事がほぼなくなったのでフォトプランにしました。イラレ作業はアイコン作るくらいだったので、後述の通りXDに完全に移行しています。)
しかしながら「製品の作図をする」ためにCC契約したいと言ってる知り合いがいまして、
本業で毎日のように作図するではないようなので、それは契約には釣り合わない用途ではないかと感じました。
その程度の用途であればフリーのベクターを扱えるソフトで十分ではないかと思ったのでどんなものがあるのか調べてみました。
ツールを使うには学習コストがかかるので、それを考えると契約してもいいのかもしれないですけどね。
ベクター、ベジェを扱うソフトということで集めています。
2019/8/11 追記
XDで足りる用途もあると思うので、以下の記事もぜひみてみてください。
リンク先記事の範囲であればXDは無料で利用できます。
(共有数に制限があるのみなので実はほぼ無料のツールなんです！)
ぜひ読んでみてください。
2019/6/17 追記
https://blog.kamijin-fanta.info/2019/06/affinity-designer/
有料ソフトだけど結構良さそうです
https://www.designer.io/
すごくリッチそうです。
機能的にはかなり充実してそう。でもそのぶん、覚えるコストがあるかも。
https://vectr.com/
オンラインでも使えるみたいです。
作ったものを誰かに見せるとかもスムーズにできそうです。
割とシンプルそうなので、多機能が必要ない場合はこれがいいかもしれませんね。
cmなど単位の切り替えもできるみたいです。
http://inkscape.softonic.jp/
Illustratorの代わりといえば昔からこれだった。
でもよく落ちる印象があり、なんとなく成果物もクオリティの低いものになりがちだった記憶があるのであまりオススメしません。
アイコンの作成に使っても、レイアウトには使わない方がいいかも。
もっといえば、パワーポイントとか、keynoteとか、googleスライドでもなんとかなると思うんですよね。工夫次第。
以上でーす
しばらくの間 bootstrap使ってたので、フォームについて適当でもよかったんですがもうflexが一般的になったためあまりメリットがなくなったように感じています。
フォーム装飾には少しコツがいるのでメモっておきたいと思います。
input[type="text"]{
}上記のようにすると、submitなどを外して指定ができます。
色々指定したつもりが効かないとか、iphoneで表示が変わっちゃうとかの時に指定してください。
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;input[type="text"]:focus,
textarea:focus {
box-shadow: none;
border: 1px solid red;
outline: 0;
}ここをしっかり指定しておくといい感じに見えるようになります。
「outline」がデフォルトの影です。
スマホでinput、textareaのフォントを16px以下にすると、フォーカス時にズームされます。
使い勝手的にも16pxは使いやすいサイズだと思いますので、16px以上にしておきましょう。PCはこの縛りは特にありません。
resize: none;サイズ変更をOFFにできます。
長い文書を書く可能性がある場合はoffにしない方がいいです。
コピペのために選択した時の色を変更できます。
フォーム関係ないですけど。
::selection {
background: #ff0000;
color: #fff;
}ちょっとほんとうにどうでもいいことを書いてみます。
お得なランチなど見てみるとすごく糖質が多い。
親子丼 + 小うどん
これを頼むだけでアウト！
大盛り無料とかやってると頼みたくなりますよね。
でもそれを続けていると、胃が大きくなって太るに決まってます。
ご飯少なくて大丈夫なの？
って思う人もいるかもしれませんが、これで意外と満足感があります。
量が足りないと感じる人は、胃が大きくなってます。
プチ断食でもしてください。
これでも続けてたら体質によっては太ると思うんですよね。
つまり毎食食べてる人はやばいです。
WPでテンプレート内にコメントすることはさほど多くはありません。
しかし、見返すことがおおいので記事としてメモっておこうと思います。
オリジナルのWPテーマを作成する場合に最初にやるのがstyle.cssの作成とそのコメントです。
wordpressがこのコメントを読み取ってくれます。
けっこう大事な部分です
/*
Theme Name: テーマのタイトル
Author: 作成者名
Author URI: 作成者のURL（あれば）
Description: このテーマについての説明文
Version: バージョンを記入（1.0とか）
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/上記のような感じです。
必須は「Theme Name」のみです。
これは、テーマを入れているフォルダと同じにしておくと良いと思います。
/*
Theme Name: original-thema
*/これだけかいとけばとりあえず動きます。
固定ページや、投稿ページでテンプレートを選べるのですが、ここで認識させるには「page.php」の役割をもったファイルにコメントを書き込む必要があります。（ちなみに、アーカイブが動くURLで固定ページを作って、テンプレートファイルとして認識させればちゃんとアーカイブとして動作します。）
<?php
/*
Template Name: お問い合わせテンプレート
*/
?>これを入れておけばえらべるようになります。
以上、wpでよく使うコメント部分のメモでした。
当てはまらない人も多いと思うんですが、
自分自身の特徴を把握してその対策を打つのは大事だなーと思います。
・待ち合わせに行くのがすごく億劫で、家を出るのが時間ギリギリになる。（結果遅れる）
→逆に2時間前とかに出ると心の負担が少ない。周りの人にも無駄に早くくる人と認識される。
ちなみにたまに気まぐれや油断でギリギリに出ると高確率で遅れる。
・メールはよく考えたいので保留する
→ よくよく考えると、熟考するタイミングは来ない。とにかく即レスするようにする。
ほっとくと放置という結果になり、相手への心象は最悪になる。
・電話に出るのが苦手
→ これは自分の快適な範囲が狭いのが原因。快適な範囲を増やすにはこういった抵抗を減らしていくのが一番良い。なのであえて積極的に出るようにするべき。コンフォートゾーンを増やせ。
・コミュ障である
→ 自分から人に話しかけるよにする。それで相手が不快になることは少ない。勉強会でも得。
他にも思いついたら、ここに載せていきます。
先月はGoogle Apps Scriptについて勉強しました。
やることリストで残っているのは
です。
上の二つは、後回しでそのうちやります。カレンダーの日付で実行は、いまLINEメッセージのプログラムを実運用中なので、改善する中で実装していこうかなと思っています。
改善したらブログ書きます。
XDについて勉強しておきたいと思います。
Photoshopのほうが画像補正など一貫してできて、ええやん。と思わなくはないのだが、
最近XDで作業をしてくる人が多い。
職場に入ってPhotoshop使ってくださいって言われたらどうするんだろうね。しらね。
XDで作業する場合は、写真埋め込み部分の画像加工はPhotoshopと連携して行うという考え方だ。
もしアイコンなどがあればイラストレータとも連携する。
といった具合である。
Photoshopと比べたXDの利点はいくつかある。
こんな感じですね。
実際使え、と言われたら多分困るのですこし勉強して慣れておきたいと思います。
ワイヤーフレーム作成、プロトタイプ、共有までを一元化！ Webディレクションの現場に革命を起こした「Adobe XD」の魅力とは
https://liginc.co.jp/398988
概要とこんな風につかってますが載ってる。
UI/UXのデザイン、プロトタイプ、共有
https://helpx.adobe.com/jp/xd/tutorials.html
Adobeのチュートリアルがあるみたいなので、ここでビデオをみて学んでおこうかと思います。
ビデオの感想などブログでかけたらいいなと思っています。
クソ簡単にGitの説明をする
https://anond.hatelabo.jp/20190203175803
こういうちょっと誤解を招くかもしれないけど、初心者はこれだけわかればいいよ、
は大事だと思います。
頭いい人は、こういうの嫌いだと思うけど。
これ読んで実際使おうと思っても困ると思うので、少し勉強しておきたいと思います。
ほとんど一人で使ってるので、masterしか扱ったことがない。
ツール使うと逆に難しいのはわかる。
VS codeからGitを使うのが一番わかりやすいんじゃないかなと思います。
githubを買収したmicrosoftのエディタなので、今後半端ない連携になると期待します。
githubはプライベートが無料になって、3人まで共有できるので普通に使う分には全然問題のないサイトになってます。
なのでgithubをバリバリ活用できるようになっていきたいです。
わかばちゃんと学ぶ Git使い方入門
https://www.amazon.co.jp/dp/4863542178/
買おうかな
learngitbranching
https://learngitbranching.js.org/
実際に触って学べるサイト
fetchの解説
https://eng-entrance.com/git-fetch
https://qiita.com/usamik26/items/28be7d2c221a7a53c2c3
いろいろ学んで、このブログにわっかりやすい解説を・・・・
できるかなぁ・・・
GASでLINEのグループIDを確認する
https://cyuraharuto.com/gas-line-gid-get/
上記記事で、ラインのグループIDが確認できるみたいです。
既存のものにコードを足したらうごかなかったので、新たにシートを作成し直しました。
グループIDが取れたら
function sendLINE(){
var CHANNEL_ACCESS_TOKEN = "xxxxxx";//トークン
var url = 'https://api.line.me/v2/bot/message/push';
var toID = 'xxx';//上で取得したグループID
var body = 'グループにメッセージ';
UrlFetchApp.fetch(url, {
'headers': {
'Content-Type': 'application/json; charset=UTF-8',
'Authorization': 'Bearer ' + CHANNEL_ACCESS_TOKEN,
},
'method': 'POST',
'payload': JSON.stringify({
'to': toID,
'messages':[{
'type': 'text',
'text': body ,
}]
})
})
}これで送信できるようです。
toのIDの部分をグループIDにすればよかったんですね。